@extends('admin.layouts.app')

@section('title', '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">Orders</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Manage all customer orders</p>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{{ route('admin.orders.index', ['filter' => 'today']) }}" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                Today's Orders
            </a>
            <a href="{{ route('admin.orders.create') }}" class="px-4 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition-colors flex items-center">
                <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
                Create Order
            </a>
        </div>
    </div>

    <!-- 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.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 ID, name, 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 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
            </div>
            <div>
                <select name="status" class="px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500">
                    <option value="">All Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>Processing</option>
                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    <option value="returned" {{ request('status') == 'returned' ? 'selected' : '' }}>Returned</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 transition-colors">
                Filter
            </button>
            <a href="{{ route('admin.orders.index') }}" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                Reset
            </a>
        </form>
    </div>

    <!-- 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">Order ID</th>
                        <th class="px-6 py-4">Customer</th>
                        <th class="px-6 py-4">Items</th>
                        <th class="px-6 py-4">Total</th>
                        <th class="px-6 py-4">Payment</th>
                        <th class="px-6 py-4">Status</th>
                        <th class="px-6 py-4">Date</th>
                        <th class="px-6 py-4">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                    @forelse($orders as $order)
                    <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                        <td class="px-6 py-4">
                            <span class="font-medium text-slate-800 dark:text-white">#{{ $order->id }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($order->shipping_name) }}&background=6366f1&color=fff" class="w-8 h-8 rounded-lg mr-3">
                                <div>
                                    <p class="font-medium text-slate-800 dark:text-white">{{ $order->shipping_name }}</p>
                                    <p class="text-sm text-slate-500 dark:text-slate-400">{{ $order->shipping_phone }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-slate-600 dark:text-slate-300">{{ $order->items->count() }} items</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="font-semibold text-slate-800 dark:text-white">৳{{ number_format($order->total) }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div>
                                <span class="text-sm text-slate-600 dark:text-slate-300">{{ strtoupper($order->payment_method ?? 'COD') }}</span>
                                @php
                                    $paymentColors = [
                                        'paid' => 'text-emerald-600',
                                        'pending' => 'text-amber-600',
                                        'failed' => 'text-red-600',
                                    ];
                                @endphp
                                <p class="text-xs {{ $paymentColors[$order->payment_status] ?? 'text-slate-500' }}">
                                    {{ ucfirst($order->payment_status) }}
                                </p>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @php
                                $statusColors = [
                                    'pending' => 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400',
                                    'processing' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
                                    'completed' => 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400',
                                    'cancelled' => 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400',
                                    'returned' => 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400',
                                ];
                            @endphp
                            <select onchange="updateStatus({{ $order->id }}, this.value)" 
                                class="px-3 py-1 text-xs font-medium {{ $statusColors[$order->status] ?? 'bg-slate-100 text-slate-700' }} rounded-full border-0 cursor-pointer">
                                <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>Processing</option>
                                <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                <option value="returned" {{ $order->status == 'returned' ? 'selected' : '' }}>Returned</option>
                            </select>
                        </td>
                        <td class="px-6 py-4">
                            <span class="text-sm text-slate-500 dark:text-slate-400">{{ $order->created_at->format('M d, Y') }}</span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center space-x-1">
                                <a href="{{ route('admin.orders.show', $order) }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors" title="View">
                                    <i data-lucide="eye" class="w-4 h-4 text-slate-500 dark:text-slate-400"></i>
                                </a>
                                <a href="{{ route('admin.orders.edit', $order) }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors" title="Edit">
                                    <i data-lucide="edit" class="w-4 h-4 text-slate-500 dark:text-slate-400"></i>
                                </a>
                                <button onclick="checkFraud({{ $order->id }}, '{{ $order->shipping_phone }}')" class="p-2 hover:bg-orange-100 dark:hover:bg-orange-900/30 rounded-lg transition-colors" title="Fraud Check">
                                    <i data-lucide="shield-alert" class="w-4 h-4 text-orange-500"></i>
                                </button>
                                <form action="{{ route('admin.orders.destroy', $order) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this order?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-colors" title="Delete">
                                        <i data-lucide="trash-2" class="w-4 h-4 text-red-500"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center">
                                <i data-lucide="inbox" class="w-12 h-12 text-slate-300 dark:text-slate-600 mb-4"></i>
                                <p class="text-slate-500 dark:text-slate-400">No orders found</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($orders->hasPages())
        <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-700">
            {{ $orders->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Fraud Check Modal -->
<div id="fraudModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-slate-900/50" onclick="closeFraudModal()"></div>
        <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl max-w-lg w-full p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Fraud Check Results</h3>
                <button onclick="closeFraudModal()" class="p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg">
                    <i data-lucide="x" class="w-5 h-5 text-slate-500"></i>
                </button>
            </div>
            <div id="fraudModalContent">
                <div class="flex items-center justify-center py-8">
                    <svg class="animate-spin w-8 h-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" 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>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/courier.js') }}"></script>
<script>
function updateStatus(orderId, status) {
    fetch(`/admin/orders/${orderId}/status`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({ status: status })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to update status');
    });
}

function checkFraud(orderId, phone) {
    document.getElementById('fraudModal').classList.remove('hidden');
    document.getElementById('fraudModalContent').innerHTML = `
        <div class="flex items-center justify-center py-8">
            <svg class="animate-spin w-8 h-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" 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>
    `;
    
    fetch(`/admin/orders/${orderId}/fraud-check`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        // Check if response has success field or has courier data (valid response)
        if (data.success === true || data.phone || data.couriers) {
            document.getElementById('fraudModalContent').innerHTML = renderFraudTable(data, phone);
        } else if (data.success === false) {
            document.getElementById('fraudModalContent').innerHTML = `
                <div class="text-center py-4">
                    <div class="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-full flex items-center justify-center mx-auto mb-3">
                        <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                    </div>
                    <p class="text-amber-600 dark:text-amber-400">${data.error || 'Unable to check fraud history'}</p>
                </div>
            `;
        } else {
            // Fallback - try to render anyway
            document.getElementById('fraudModalContent').innerHTML = renderFraudTable(data, phone);
        }
        if (typeof reinitIcons !== 'undefined') reinitIcons();
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('fraudModalContent').innerHTML = `
            <div class="text-center py-4">
                <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <p class="text-red-600 dark:text-red-400">Failed to check fraud history</p>
                <p class="text-xs text-slate-500 mt-1">${error.message || 'Network error'}</p>
            </div>
        `;
        if (typeof reinitIcons !== 'undefined') reinitIcons();
    });
}

function renderFraudTable(data, phone) {
    const riskColors = {
        'low': 'emerald',
        'medium': 'amber', 
        'high': 'red',
        'unknown': 'slate'
    };
    const riskBgColors = {
        'low': 'bg-emerald-100 dark:bg-emerald-900/30',
        'medium': 'bg-amber-100 dark:bg-amber-900/30', 
        'high': 'bg-red-100 dark:bg-red-900/30',
        'unknown': 'bg-slate-100 dark:bg-slate-700'
    };
    const riskTextColors = {
        'low': 'text-emerald-700 dark:text-emerald-300',
        'medium': 'text-amber-700 dark:text-amber-300', 
        'high': 'text-red-700 dark:text-red-300',
        'unknown': 'text-slate-700 dark:text-slate-300'
    };
    const level = data.risk_level?.level || 'unknown';
    
    let html = `
        <div class="mb-4 text-center">
            <p class="text-sm text-slate-500 mb-2">Phone: <span class="font-mono">${phone}</span></p>
            <div class="inline-flex items-center px-4 py-2 ${riskBgColors[level]} rounded-xl">
                <span class="font-semibold ${riskTextColors[level]}">${data.risk_level?.label || 'Unknown'}</span>
            </div>
            <p class="text-sm text-slate-500 mt-2">${data.risk_level?.description || ''}</p>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 dark:bg-slate-700/50">
                    <tr>
                        <th class="px-3 py-2 text-left text-xs font-medium text-slate-500 uppercase">Courier</th>
                        <th class="px-3 py-2 text-center text-xs font-medium text-slate-500 uppercase">Total</th>
                        <th class="px-3 py-2 text-center text-xs font-medium text-slate-500 uppercase">Delivered</th>
                        <th class="px-3 py-2 text-center text-xs font-medium text-slate-500 uppercase">Returned</th>
                        <th class="px-3 py-2 text-center text-xs font-medium text-slate-500 uppercase">Success %</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
    `;
    
    // Add courier rows
    if (data.couriers) {
        for (const [key, courier] of Object.entries(data.couriers)) {
            html += `
                <tr>
                    <td class="px-3 py-2 font-medium text-slate-800 dark:text-white">${courier.name}</td>
                    <td class="px-3 py-2 text-center text-slate-600 dark:text-slate-300">${courier.total_parcels}</td>
                    <td class="px-3 py-2 text-center text-emerald-600">${courier.delivered}</td>
                    <td class="px-3 py-2 text-center text-red-600">${courier.returned}</td>
                    <td class="px-3 py-2 text-center font-medium">${courier.success_ratio}%</td>
                </tr>
            `;
        }
    }
    
    // Add overall row
    html += `
                <tr class="bg-slate-50 dark:bg-slate-700/50 font-semibold">
                    <td class="px-3 py-2 text-slate-800 dark:text-white">Overall</td>
                    <td class="px-3 py-2 text-center text-slate-800 dark:text-white">${data.overall?.total_parcels || 0}</td>
                    <td class="px-3 py-2 text-center text-emerald-600">${data.overall?.delivered || 0}</td>
                    <td class="px-3 py-2 text-center text-red-600">${data.overall?.returned || 0}</td>
                    <td class="px-3 py-2 text-center text-indigo-600">${data.overall?.success_ratio || 0}%</td>
                </tr>
            </tbody>
        </table>
    </div>
    `;
    
    return html;
}

function closeFraudModal() {
    document.getElementById('fraudModal').classList.add('hidden');
}
</script>
@endpush