@extends('admin.layouts.app')

@section('title', 'Order #' . $order->id)

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <div class="flex items-center space-x-3">
                <a href="{{ route('admin.orders.index') }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
                    <i data-lucide="arrow-left" class="w-5 h-5 text-slate-500"></i>
                </a>
                <div>
                    <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Order #{{ $order->id }}</h1>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $order->created_at->format('F d, Y h:i A') }}</p>
                </div>
            </div>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-3">
            @php
                $statusColors = [
                    'pending' => 'bg-amber-100 text-amber-700',
                    'processing' => 'bg-blue-100 text-blue-700',
                    'completed' => 'bg-emerald-100 text-emerald-700',
                    'cancelled' => 'bg-red-100 text-red-700',
                    'returned' => 'bg-purple-100 text-purple-700',
                ];
            @endphp
            <span class="px-4 py-2 {{ $statusColors[$order->status] ?? 'bg-slate-100 text-slate-700' }} rounded-xl font-medium">
                {{ ucfirst($order->status) }}
            </span>
            <a href="{{ route('admin.orders.edit', $order) }}" 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="edit" class="w-4 h-4 mr-2"></i>
                Edit
            </a>
            <button onclick="printInvoice()" class="px-4 py-2 bg-emerald-600 text-white rounded-xl text-sm font-medium hover:bg-emerald-700 transition-colors flex items-center">
                <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                Invoice
            </button>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Order Items -->
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div class="p-6 border-b border-slate-200 dark:border-slate-700">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Order Items</h2>
                </div>
                <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-3">Product</th>
                                <th class="px-6 py-3">Price</th>
                                <th class="px-6 py-3">Qty</th>
                                <th class="px-6 py-3">Total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                            @foreach($order->items as $item)
                            <tr>
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="w-12 h-12 bg-slate-100 dark:bg-slate-700 rounded-lg flex items-center justify-center mr-4">
                                            <i data-lucide="package" class="w-6 h-6 text-slate-400"></i>
                                        </div>
                                        <div>
                                            <p class="font-medium text-slate-800 dark:text-white">{{ $item->product_name }}</p>
                                            @if($item->color || $item->size)
                                            <p class="text-sm text-slate-500">
                                                @if($item->color) Color: {{ $item->color }} @endif
                                                @if($item->size) | Size: {{ $item->size }} @endif
                                            </p>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-slate-600 dark:text-slate-300">৳{{ number_format($item->price) }}</td>
                                <td class="px-6 py-4 text-slate-600 dark:text-slate-300">{{ $item->quantity }}</td>
                                <td class="px-6 py-4 font-medium text-slate-800 dark:text-white">৳{{ number_format($item->price * $item->quantity) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="p-6 bg-slate-50 dark:bg-slate-700/50 space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500 dark:text-slate-400">Subtotal</span>
                        <span class="text-slate-800 dark:text-white">৳{{ number_format($order->subtotal) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500 dark:text-slate-400">Shipping</span>
                        <span class="text-slate-800 dark:text-white">৳{{ number_format($order->shipping_charge) }}</span>
                    </div>
                    @if($order->discount > 0)
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500 dark:text-slate-400">Discount</span>
                        <span class="text-red-500">-৳{{ number_format($order->discount) }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between text-lg font-semibold pt-2 border-t border-slate-200 dark:border-slate-600">
                        <span class="text-slate-800 dark:text-white">Total</span>
                        <span class="text-indigo-600 dark:text-indigo-400">৳{{ number_format($order->total) }}</span>
                    </div>
                </div>
            </div>

            <!-- Order Notes -->
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div class="p-6 border-b border-slate-200 dark:border-slate-700">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Order Notes</h2>
                </div>
                <div class="p-6">
                    <form action="{{ route('admin.orders.comment', $order) }}" method="POST" class="mb-6">
                        @csrf
                        <div class="flex space-x-3">
                            <input type="text" name="comment" placeholder="Add a note..." 
                                class="flex-1 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">
                            <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">
                                Add
                            </button>
                        </div>
                    </form>
                    <div class="space-y-4">
                        @forelse($order->comments as $comment)
                        <div class="flex space-x-3">
                            <div class="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center">
                                <i data-lucide="user" class="w-4 h-4 text-indigo-600 dark:text-indigo-400"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center space-x-2">
                                    <span class="font-medium text-slate-800 dark:text-white">{{ $comment->user?->name ?? 'Admin' }}</span>
                                    <span class="text-xs text-slate-500">{{ $comment->created_at->diffForHumans() }}</span>
                                </div>
                                <p class="text-sm text-slate-600 dark:text-slate-300 mt-1">{{ $comment->comment }}</p>
                            </div>
                        </div>
                        @empty
                        <p class="text-center text-slate-500 dark:text-slate-400 py-4">No notes yet</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Customer Info -->
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Customer</h3>
                <div class="flex items-center mb-4">
                    <img src="https://ui-avatars.com/api/?name={{ urlencode($order->shipping_name) }}&background=6366f1&color=fff" class="w-12 h-12 rounded-xl mr-4">
                    <div>
                        <p class="font-medium text-slate-800 dark:text-white">{{ $order->shipping_name }}</p>
                        <p class="text-sm text-slate-500">{{ $order->customer?->orders()->count() ?? 1 }} orders</p>
                    </div>
                </div>
                <div class="space-y-3 text-sm">
                    <div class="flex items-center text-slate-600 dark:text-slate-300">
                        <i data-lucide="phone" class="w-4 h-4 mr-3 text-slate-400"></i>
                        {{ $order->shipping_phone }}
                    </div>
                    @if($order->shipping_email)
                    <div class="flex items-center text-slate-600 dark:text-slate-300">
                        <i data-lucide="mail" class="w-4 h-4 mr-3 text-slate-400"></i>
                        {{ $order->shipping_email }}
                    </div>
                    @endif
                    <div class="flex items-start text-slate-600 dark:text-slate-300">
                        <i data-lucide="map-pin" class="w-4 h-4 mr-3 mt-0.5 text-slate-400"></i>
                        <span>{{ $order->shipping_address }}<br>{{ $order->shipping_area }}, {{ $order->shipping_district }}</span>
                    </div>
                </div>
            </div>

            <!-- Payment Info -->
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Payment</h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-slate-500 dark:text-slate-400">Method</span>
                        <span class="font-medium text-slate-800 dark:text-white">{{ strtoupper($order->payment_method ?? 'COD') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate-500 dark:text-slate-400">Status</span>
                        @php
                            $paymentStatusColors = ['paid' => 'text-emerald-600', 'pending' => 'text-amber-600', 'failed' => 'text-red-600'];
                        @endphp
                        <span class="font-medium {{ $paymentStatusColors[$order->payment_status] ?? 'text-slate-600' }}">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Fraud Check -->
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Fraud Check</h3>
                <button onclick="checkFraud({{ $order->id }})" id="fraudCheckBtn"
                    class="w-full px-4 py-2 bg-orange-500 text-white rounded-xl text-sm font-medium hover:bg-orange-600 transition-colors flex items-center justify-center">
                    <i data-lucide="shield-alert" class="w-4 h-4 mr-2"></i>
                    Check History
                </button>
                <div id="fraudCheckResults" class="hidden mt-4"></div>
            </div>

            <!-- Quick Actions -->
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Quick Actions</h3>
                <div class="space-y-3">
                    <select onchange="updateStatus({{ $order->id }}, this.value)" 
                        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">
                        <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>
                    <a href="tel:{{ $order->shipping_phone }}" class="w-full px-4 py-2 bg-emerald-600 text-white rounded-xl text-sm font-medium hover:bg-emerald-700 transition-colors flex items-center justify-center">
                        <i data-lucide="phone" class="w-4 h-4 mr-2"></i>
                        Call
                    </a>
                    <a href="https://wa.me/88{{ $order->shipping_phone }}" target="_blank" class="w-full px-4 py-2 bg-green-600 text-white rounded-xl text-sm font-medium hover:bg-green-700 transition-colors flex items-center justify-center">
                        <i data-lucide="message-circle" class="w-4 h-4 mr-2"></i>
                        WhatsApp
                    </a>
                </div>
            </div>

            <!-- Send to Courier -->
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Send to Courier</h3>
                @if($order->tracking_id)
                <div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-xl p-4 mb-4">
                    <p class="text-sm text-emerald-700 dark:text-emerald-400">
                        <i data-lucide="check-circle" class="w-4 h-4 inline mr-1"></i>
                        Sent to {{ ucfirst($order->courier ?? 'courier') }}
                    </p>
                    <p class="text-xs text-emerald-600 dark:text-emerald-500 mt-1">Tracking: {{ $order->tracking_id }}</p>
                </div>
                @endif
                @php
                    $couriers = [
                        'steadfast' => ['name' => 'Steadfast', 'color' => 'blue', 'modal' => false],
                        'pathao' => ['name' => 'Pathao', 'color' => 'red', 'modal' => true],
                        'redx' => ['name' => 'RedX', 'color' => 'orange', 'modal' => true],
                        'paperfly' => ['name' => 'Paperfly', 'color' => 'purple', 'modal' => false],
                        'ecourier' => ['name' => 'eCourier', 'color' => 'teal', 'modal' => false],
                        'sundarban' => ['name' => 'Sundarban', 'color' => 'amber', 'modal' => false],
                    ];
                    $enabledCouriers = [];
                    foreach ($couriers as $key => $courier) {
                        if (\App\Models\Setting::get($key . '_enabled', '0') === '1') {
                            $enabledCouriers[$key] = $courier;
                        }
                    }
                @endphp
                <div class="grid grid-cols-2 gap-2" id="courierButtons">
                    @forelse($enabledCouriers as $key => $courier)
                        @if($courier['modal'])
                        <button onclick="openCourierModal({{ $order->id }}, '{{ $key }}')" class="px-3 py-2 bg-{{ $courier['color'] }}-100 dark:bg-{{ $courier['color'] }}-900/30 text-{{ $courier['color'] }}-700 dark:text-{{ $courier['color'] }}-400 rounded-xl text-xs font-medium hover:bg-{{ $courier['color'] }}-200 transition-colors">{{ $courier['name'] }}</button>
                        @else
                        <button onclick="sendToCourier({{ $order->id }}, '{{ $key }}')" class="px-3 py-2 bg-{{ $courier['color'] }}-100 dark:bg-{{ $courier['color'] }}-900/30 text-{{ $courier['color'] }}-700 dark:text-{{ $courier['color'] }}-400 rounded-xl text-xs font-medium hover:bg-{{ $courier['color'] }}-200 transition-colors">{{ $courier['name'] }}</button>
                        @endif
                    @empty
                    <p class="col-span-2 text-sm text-slate-500 dark:text-slate-400 text-center py-2">No couriers enabled. Enable couriers in Settings.</p>
                    @endforelse
                </div>
                <div id="courierResult" class="hidden mt-3 p-3 rounded-xl text-sm"></div>
            </div>
        </div>
    </div>
</div>

<!-- Courier Area Selection Modal -->
<div id="courierModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl max-w-md w-full">
        <div class="p-6 border-b border-slate-200 dark:border-slate-700">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-slate-800 dark:text-white" id="courierModalTitle">Select Delivery Area</h3>
                <button onclick="closeCourierModal()" class="p-2 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>
        <div class="p-6 space-y-4">
            <!-- Pathao Fields -->
            <div id="pathaoFields" class="hidden space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">City</label>
                    <select id="pathaoCity" onchange="loadPathaoZones()" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                        <option value="">Loading cities...</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Zone</label>
                    <select id="pathaoZone" onchange="loadPathaoAreas()" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white" disabled>
                        <option value="">Select city first</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Area (Optional)</label>
                    <select id="pathaoArea" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white" disabled>
                        <option value="">Select zone first</option>
                    </select>
                </div>
            </div>
            <!-- RedX Fields -->
            <div id="redxFields" class="hidden space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Search Area</label>
                    <input type="text" id="redxSearch" onkeyup="filterRedXAreas()" placeholder="Type to search..." class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Area</label>
                    <select id="redxArea" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                        <option value="">Loading areas...</option>
                    </select>
                </div>
            </div>
            <div id="courierModalError" class="hidden p-3 bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-xl text-sm"></div>
        </div>
        <div class="p-6 border-t border-slate-200 dark:border-slate-700 flex justify-end space-x-3">
            <button onclick="closeCourierModal()" 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 transition-colors">Cancel</button>
            <button onclick="submitCourierWithDetails()" id="courierModalSubmit" class="px-4 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition-colors">Send to Courier</button>
        </div>
    </div>
</div>
@endsection


@push('scripts')
<script src="{{ asset('js/courier.js') }}"></script>
<script>
// Variables are declared in courier.js
// let currentOrderId = null;
// let currentCourier = null;
// let redxAreasData = [];

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 })
    }).then(r => r.json()).then(d => { if (d.success) location.reload(); });
}

function checkFraud(orderId) {
    const btn = document.getElementById('fraudCheckBtn');
    const results = document.getElementById('fraudCheckResults');
    btn.disabled = true;
    btn.innerHTML = '<svg class="animate-spin w-4 h-4 mr-2" 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> Checking...';
    
    fetch(`/admin/orders/${orderId}/fraud-check`, { headers: { 'Accept': 'application/json' } })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="shield-alert" class="w-4 h-4 mr-2"></i> Check History';
        if (typeof reinitIcons !== 'undefined') reinitIcons();
        
        const risk = data.risk_level || { level: 'unknown', label: 'Unknown' };
        const overall = data.overall || { total_parcels: 0, delivered: 0, returned: 0, success_ratio: 0 };
        const colors = { low: 'emerald', medium: 'amber', high: 'red', unknown: 'slate' };
        const c = colors[risk.level] || 'slate';
        
        results.innerHTML = `
            <div class="text-center mb-3">
                <span class="inline-flex items-center px-3 py-1 bg-${c}-100 dark:bg-${c}-900/30 text-${c}-700 dark:text-${c}-300 rounded-lg text-sm font-medium">
                    ${risk.label}
                </span>
            </div>
            <div class="grid grid-cols-3 gap-2 text-center text-xs">
                <div class="p-2 bg-slate-50 dark:bg-slate-700/50 rounded-lg">
                    <p class="text-lg font-bold text-slate-800 dark:text-white">${overall.total_parcels}</p>
                    <p class="text-slate-500">Total</p>
                </div>
                <div class="p-2 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
                    <p class="text-lg font-bold text-emerald-600">${overall.delivered}</p>
                    <p class="text-slate-500">Delivered</p>
                </div>
                <div class="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg">
                    <p class="text-lg font-bold text-red-600">${overall.returned}</p>
                    <p class="text-slate-500">Returned</p>
                </div>
            </div>
            <div class="mt-3">
                <div class="flex justify-between text-xs mb-1">
                    <span class="text-slate-500">Success Rate</span>
                    <span class="font-medium">${overall.success_ratio}%</span>
                </div>
                <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-1.5">
                    <div class="bg-${c}-500 h-1.5 rounded-full" style="width: ${Math.min(overall.success_ratio, 100)}%"></div>
                </div>
            </div>
        `;
        results.classList.remove('hidden');
        if (typeof reinitIcons !== 'undefined') reinitIcons();
    })
    .catch(e => {
        btn.disabled = false;
        btn.innerHTML = '<i data-lucide="shield-alert" class="w-4 h-4 mr-2"></i> Check History';
        results.innerHTML = `<p class="text-red-500 text-sm text-center">Failed to check: ${e.message}</p>`;
        results.classList.remove('hidden');
        if (typeof reinitIcons !== 'undefined') reinitIcons();
    });
}

function sendToCourier(orderId, courier) {
    const result = document.getElementById('courierResult');
    result.className = 'mt-3 p-3 rounded-xl text-sm bg-slate-100 dark:bg-slate-700 text-slate-600';
    result.innerHTML = '<i data-lucide="loader" class="w-4 h-4 inline animate-spin mr-2"></i> Sending...';
    result.classList.remove('hidden');
    if (typeof reinitIcons !== 'undefined') reinitIcons();
    
    fetch(`/admin/orders/${orderId}/send-to-courier`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({ courier })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            result.className = 'mt-3 p-3 rounded-xl text-sm bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700';
            result.innerHTML = `<i data-lucide="check-circle" class="w-4 h-4 inline mr-2"></i> ${data.message}`;
            setTimeout(() => location.reload(), 2000);
        } else {
            result.className = 'mt-3 p-3 rounded-xl text-sm bg-red-100 dark:bg-red-900/30 text-red-700';
            result.innerHTML = `<i data-lucide="alert-circle" class="w-4 h-4 inline mr-2"></i> ${data.message}`;
        }
        if (typeof reinitIcons !== 'undefined') reinitIcons();
    })
    .catch(e => {
        result.className = 'mt-3 p-3 rounded-xl text-sm bg-red-100 dark:bg-red-900/30 text-red-700';
        result.innerHTML = `<i data-lucide="alert-circle" class="w-4 h-4 inline mr-2"></i> Error: ${e.message}`;
        if (typeof reinitIcons !== 'undefined') reinitIcons();
    });
}

function openCourierModal(orderId, courier) {
    currentOrderId = orderId;
    currentCourier = courier;
    document.getElementById('courierModal').classList.remove('hidden');
    document.getElementById('courierModalTitle').textContent = `Send to ${courier.charAt(0).toUpperCase() + courier.slice(1)}`;
    document.getElementById('courierModalError').classList.add('hidden');
    
    if (courier === 'pathao') {
        document.getElementById('pathaoFields').classList.remove('hidden');
        document.getElementById('redxFields').classList.add('hidden');
        loadPathaoCities();
    } else if (courier === 'redx') {
        document.getElementById('pathaoFields').classList.add('hidden');
        document.getElementById('redxFields').classList.remove('hidden');
        loadRedXAreas();
    }
    if (typeof reinitIcons !== 'undefined') reinitIcons();
}

function closeCourierModal() {
    document.getElementById('courierModal').classList.add('hidden');
    currentOrderId = null;
    currentCourier = null;
}

function loadPathaoCities() {
    const select = document.getElementById('pathaoCity');
    select.innerHTML = '<option value="">Loading...</option>';
    
    fetch('/admin/couriers/pathao/cities')
    .then(r => r.json())
    .then(data => {
        if (data.success && data.data) {
            select.innerHTML = '<option value="">Select City</option>' + 
                data.data.map(c => `<option value="${c.city_id}">${c.city_name}</option>`).join('');
        } else {
            select.innerHTML = '<option value="">Failed to load</option>';
            showCourierError(data.message || 'Failed to load cities');
        }
    })
    .catch(e => {
        select.innerHTML = '<option value="">Error loading</option>';
        showCourierError(e.message);
    });
}

function loadPathaoZones() {
    const cityId = document.getElementById('pathaoCity').value;
    const zoneSelect = document.getElementById('pathaoZone');
    const areaSelect = document.getElementById('pathaoArea');
    
    if (!cityId) {
        zoneSelect.innerHTML = '<option value="">Select city first</option>';
        zoneSelect.disabled = true;
        areaSelect.innerHTML = '<option value="">Select zone first</option>';
        areaSelect.disabled = true;
        return;
    }
    
    zoneSelect.innerHTML = '<option value="">Loading...</option>';
    zoneSelect.disabled = true;
    
    fetch(`/admin/couriers/pathao/zones?city_id=${cityId}`)
    .then(r => r.json())
    .then(data => {
        if (data.success && data.data) {
            zoneSelect.innerHTML = '<option value="">Select Zone</option>' + 
                data.data.map(z => `<option value="${z.zone_id}">${z.zone_name}</option>`).join('');
            zoneSelect.disabled = false;
        } else {
            zoneSelect.innerHTML = '<option value="">Failed to load</option>';
            showCourierError(data.message || 'Failed to load zones');
        }
    })
    .catch(e => {
        zoneSelect.innerHTML = '<option value="">Error</option>';
        showCourierError(e.message);
    });
    
    areaSelect.innerHTML = '<option value="">Select zone first</option>';
    areaSelect.disabled = true;
}

function loadPathaoAreas() {
    const zoneId = document.getElementById('pathaoZone').value;
    const areaSelect = document.getElementById('pathaoArea');
    
    if (!zoneId) {
        areaSelect.innerHTML = '<option value="">Select zone first</option>';
        areaSelect.disabled = true;
        return;
    }
    
    areaSelect.innerHTML = '<option value="">Loading...</option>';
    
    fetch(`/admin/couriers/pathao/areas?zone_id=${zoneId}`)
    .then(r => r.json())
    .then(data => {
        if (data.success && data.data) {
            areaSelect.innerHTML = '<option value="">Select Area (Optional)</option>' + 
                data.data.map(a => `<option value="${a.area_id}">${a.area_name}</option>`).join('');
            areaSelect.disabled = false;
        } else {
            areaSelect.innerHTML = '<option value="">No areas found</option>';
            areaSelect.disabled = false;
        }
    })
    .catch(e => {
        areaSelect.innerHTML = '<option value="">Error</option>';
    });
}

function loadRedXAreas() {
    const select = document.getElementById('redxArea');
    select.innerHTML = '<option value="">Loading...</option>';
    
    fetch('/admin/couriers/redx/areas')
    .then(r => r.json())
    .then(data => {
        if (data.success && data.data) {
            redxAreasData = data.data;
            renderRedXAreas(redxAreasData);
        } else {
            select.innerHTML = '<option value="">Failed to load</option>';
            showCourierError(data.message || 'Failed to load areas');
        }
    })
    .catch(e => {
        select.innerHTML = '<option value="">Error</option>';
        showCourierError(e.message);
    });
}

function renderRedXAreas(areas) {
    const select = document.getElementById('redxArea');
    select.innerHTML = '<option value="">Select Area</option>' + 
        areas.slice(0, 100).map(a => `<option value="${a.id}" data-name="${a.name}">${a.name} - ${a.district_name || ''}</option>`).join('');
}

function filterRedXAreas() {
    const search = document.getElementById('redxSearch').value.toLowerCase();
    const filtered = redxAreasData.filter(a => 
        (a.name && a.name.toLowerCase().includes(search)) || 
        (a.district_name && a.district_name.toLowerCase().includes(search))
    );
    renderRedXAreas(filtered);
}

function showCourierError(msg) {
    const err = document.getElementById('courierModalError');
    err.textContent = msg;
    err.classList.remove('hidden');
}

function submitCourierWithDetails() {
    const btn = document.getElementById('courierModalSubmit');
    btn.disabled = true;
    btn.textContent = 'Sending...';
    
    let body = { courier: currentCourier };
    
    if (currentCourier === 'pathao') {
        const cityId = document.getElementById('pathaoCity').value;
        const zoneId = document.getElementById('pathaoZone').value;
        const areaId = document.getElementById('pathaoArea').value;
        
        if (!cityId || !zoneId) {
            showCourierError('Please select city and zone');
            btn.disabled = false;
            btn.textContent = 'Send to Courier';
            return;
        }
        
        body.city_id = parseInt(cityId);
        body.zone_id = parseInt(zoneId);
        if (areaId) body.area_id = parseInt(areaId);
    } else if (currentCourier === 'redx') {
        const areaSelect = document.getElementById('redxArea');
        const areaId = areaSelect.value;
        const areaName = areaSelect.options[areaSelect.selectedIndex]?.dataset?.name;
        
        if (!areaId) {
            showCourierError('Please select an area');
            btn.disabled = false;
            btn.textContent = 'Send to Courier';
            return;
        }
        
        body.area_id = parseInt(areaId);
        body.area_name = areaName;
    }
    
    fetch(`/admin/orders/${currentOrderId}/send-to-courier`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify(body)
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.textContent = 'Send to Courier';
        
        if (data.success) {
            closeCourierModal();
            const result = document.getElementById('courierResult');
            result.className = 'mt-3 p-3 rounded-xl text-sm bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700';
            result.innerHTML = `<i data-lucide="check-circle" class="w-4 h-4 inline mr-2"></i> ${data.message}`;
            result.classList.remove('hidden');
            if (typeof reinitIcons !== 'undefined') reinitIcons();
            setTimeout(() => location.reload(), 2000);
        } else {
            showCourierError(data.message);
        }
    })
    .catch(e => {
        btn.disabled = false;
        btn.textContent = 'Send to Courier';
        showCourierError(e.message);
    });
}

function printInvoice() {
    const invoiceContent = `<!DOCTYPE html>
<html>
<head>
    <title>Invoice #{{ $order->id }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Arial, sans-serif; padding: 0; background: #fff; color: #333; }
        .invoice { max-width: 800px; margin: 0 auto; padding: 40px; }
        .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 3px solid #4f46e5; }
        .logo { font-size: 28px; font-weight: 700; color: #4f46e5; }
        .logo-sub { font-size: 12px; color: #666; margin-top: 4px; }
        .invoice-title { text-align: right; }
        .invoice-title h1 { font-size: 32px; color: #1f2937; margin-bottom: 8px; }
        .invoice-title p { color: #6b7280; font-size: 14px; }
        .invoice-meta { display: flex; justify-content: space-between; margin-bottom: 40px; }
        .meta-box { width: 48%; }
        .meta-box h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; margin-bottom: 12px; font-weight: 600; }
        .meta-box p { margin: 4px 0; font-size: 14px; color: #374151; }
        .meta-box .highlight { font-weight: 600; color: #1f2937; font-size: 16px; }
        .status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
        .status-pending { background: #fef3c7; color: #92400e; }
        .status-processing { background: #dbeafe; color: #1e40af; }
        .status-completed { background: #d1fae5; color: #065f46; }
        .status-cancelled { background: #fee2e2; color: #991b1b; }
        table { width: 100%; border-collapse: collapse; margin: 30px 0; }
        th { background: #f8fafc; padding: 14px 16px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; font-weight: 600; border-bottom: 2px solid #e2e8f0; }
        td { padding: 16px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #374151; }
        .text-right { text-align: right; }
        .product-name { font-weight: 500; color: #1f2937; }
        .product-variant { font-size: 12px; color: #9ca3af; margin-top: 2px; }
        .totals { margin-left: auto; width: 300px; }
        .totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
        .totals-row.subtotal { border-bottom: 1px solid #e5e7eb; }
        .totals-row.total { border-top: 2px solid #4f46e5; margin-top: 10px; padding-top: 15px; font-size: 18px; font-weight: 700; color: #4f46e5; }
        .totals-label { color: #6b7280; }
        .totals-value { font-weight: 500; color: #1f2937; }
        .footer { margin-top: 60px; padding-top: 30px; border-top: 1px solid #e5e7eb; text-align: center; }
        .footer p { color: #9ca3af; font-size: 12px; margin: 4px 0; }
        .thank-you { font-size: 18px; color: #4f46e5; font-weight: 600; margin-bottom: 10px; }
        @media print { body { padding: 0; } .invoice { padding: 20px; } }
    </style>
</head>
<body>
    <div class="invoice">
        <div class="header">
            <div>
                <div class="logo">{{ \App\Models\Setting::get('site_name', config('app.name', 'E-Shop')) }}</div>
                <div class="logo-sub">{{ \App\Models\Setting::get('store_address', '') }}</div>
            </div>
            <div class="invoice-title">
                <h1>INVOICE</h1>
                <p>#{{ str_pad($order->id, 6, '0', STR_PAD_LEFT) }}</p>
            </div>
        </div>
        
        <div class="invoice-meta">
            <div class="meta-box">
                <h3>Bill To</h3>
                <p class="highlight">{{ $order->shipping_name }}</p>
                <p>{{ $order->shipping_phone }}</p>
                <p>{{ $order->shipping_address }}</p>
                <p>{{ $order->shipping_area }}, {{ $order->shipping_district }}</p>
            </div>
            <div class="meta-box" style="text-align: right;">
                <h3>Invoice Details</h3>
                <p><strong>Date:</strong> {{ $order->created_at->format('F d, Y') }}</p>
                <p><strong>Payment:</strong> {{ strtoupper($order->payment_method ?? 'COD') }}</p>
                <p style="margin-top: 8px;"><span class="status-badge status-{{ $order->status }}">{{ ucfirst($order->status) }}</span></p>
            </div>
        </div>
        
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th class="text-right">Price</th>
                    <th class="text-right">Qty</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($order->items as $item)
                <tr>
                    <td>
                        <div class="product-name">{{ $item->product_name }}</div>
                        @if($item->color || $item->size)
                        <div class="product-variant">{{ implode(' / ', array_filter([$item->color, $item->size])) }}</div>
                        @endif
                    </td>
                    <td class="text-right">৳{{ number_format($item->price) }}</td>
                    <td class="text-right">{{ $item->quantity }}</td>
                    <td class="text-right">৳{{ number_format($item->price * $item->quantity) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        
        <div class="totals">
            <div class="totals-row subtotal">
                <span class="totals-label">Subtotal</span>
                <span class="totals-value">৳{{ number_format($order->subtotal) }}</span>
            </div>
            <div class="totals-row">
                <span class="totals-label">Shipping</span>
                <span class="totals-value">৳{{ number_format($order->shipping_charge) }}</span>
            </div>
            @if($order->discount > 0)
            <div class="totals-row">
                <span class="totals-label">Discount</span>
                <span class="totals-value" style="color: #dc2626;">-৳{{ number_format($order->discount) }}</span>
            </div>
            @endif
            <div class="totals-row total">
                <span>Total</span>
                <span>৳{{ number_format($order->total) }}</span>
            </div>
        </div>
        
        <div class="footer">
            <p class="thank-you">Thank you for your order!</p>
            <p>{{ \App\Models\Setting::get('site_name', config('app.name')) }} | {{ \App\Models\Setting::get('store_phone', '') }}</p>
            <p>{{ \App\Models\Setting::get('store_email', '') }}</p>
        </div>
    </div>
</body>
</html>`;
    
    const printWindow = window.open('', '_blank');
    printWindow.document.write(invoiceContent);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => printWindow.print(), 300);
}
</script>
@endpush