@extends('merchant.layouts.app')

@section('title', 'Dashboard Merchant')
@section('page_title', 'Dashboard')

@section('content')
<div x-data="dashboardApp()" x-init="fetchDashboard()">

    <!-- Loading -->
    <div x-show="loading" class="flex justify-center py-10">
        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-teal-600"></div>
    </div>

    <div x-show="!loading">
        <!-- Statistik -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-gray-600">Total Pendapatan</span>
                    <span class="text-2xl font-semibold text-teal-700" x-text="stats.summary.formatted_revenue">0</span>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-gray-600">Total Pesanan</span>
                    <span class="text-2xl font-semibold text-teal-700" x-text="stats.summary.total_orders">0</span>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-gray-600">Produk Aktif</span>
                    <span class="text-2xl font-semibold text-teal-700" x-text="stats.summary.active_products">0</span>
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-gray-600">Saldo</span>
                    <span class="text-2xl font-semibold text-teal-700" x-text="stats.summary.formatted_balance">0</span>
                </div>
            </div>
        </div>

        <!-- Status Pesanan -->
        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">Status Pesanan</h3>
            <div class="grid grid-cols-3 sm:grid-cols-6 gap-2 text-center">
                <div><span class="block text-lg font-bold text-yellow-600" x-text="stats.order_status.pending">0</span><span class="text-xs text-gray-500">Pending</span></div>
                <div><span class="block text-lg font-bold text-blue-600" x-text="stats.order_status.paid">0</span><span class="text-xs text-gray-500">Dibayar</span></div>
                <div><span class="block text-lg font-bold text-indigo-600" x-text="stats.order_status.processing">0</span><span class="text-xs text-gray-500">Diproses</span></div>
                <div><span class="block text-lg font-bold text-purple-600" x-text="stats.order_status.shipped">0</span><span class="text-xs text-gray-500">Dikirim</span></div>
                <div><span class="block text-lg font-bold text-green-600" x-text="stats.order_status.completed">0</span><span class="text-xs text-gray-500">Selesai</span></div>
                <div><span class="block text-lg font-bold text-red-600" x-text="stats.order_status.cancelled">0</span><span class="text-xs text-gray-500">Batal</span></div>
            </div>
        </div>

        <!-- Pesanan Terbaru -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-sm font-semibold text-gray-700">Pesanan Terbaru</h3>
                <a href="{{ route('merchant.orders.index') }}" class="text-sm text-teal-600 hover:underline">Lihat semua</a>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Order</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Pelanggan</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Total</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Tanggal</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <template x-for="order in recentOrders" :key="order.order_number">
                            <tr>
                                <td class="px-4 py-2 text-sm text-teal-600">
                                    <a :href="'/merchant/orders/' + order.uuid" x-text="order.order_number"></a>
                                </td>
                                <td class="px-4 py-2 text-sm text-gray-800" x-text="order.customer_name"></td>
                                <td class="px-4 py-2 text-sm text-gray-800" x-text="order.formatted_total"></td>
                                <td class="px-4 py-2">
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full" 
                                          :class="statusBadge(order.status)" x-text="order.status_label"></span>
                                </td>
                                <td class="px-4 py-2 text-sm text-gray-500" x-text="formatDate(order.ordered_at)"></td>
                            </tr>
                        </template>
                        <tr x-show="recentOrders.length === 0">
                            <td colspan="5" class="px-4 py-4 text-center text-sm text-gray-500">Belum ada pesanan</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function dashboardApp() {
    return {
        loading: true,
        stats: {
            summary: { total_orders: 0, active_products: 0, formatted_revenue: 'Rp 0', formatted_balance: 'Rp 0' },
            order_status: { pending: 0, paid: 0, processing: 0, shipped: 0, completed: 0, cancelled: 0 }
        },
        salesChart: [],
        recentOrders: [],

        async fetchDashboard() {
            this.loading = true;
            try {
                const token = localStorage.getItem('merchant_token');
                const res = await fetch('/api/v2/merchant/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json',
                    }
                });
                const data = await res.json();
                if (data.status) {
                    this.stats = data.data;
                    this.recentOrders = data.data.recent_orders;
                }
            } catch (err) {
                console.error('Gagal memuat dashboard', err);
            } finally {
                this.loading = false;
            }
        },

        statusBadge(status) {
            const map = {
                'pending': 'bg-yellow-100 text-yellow-800',
                'paid': 'bg-blue-100 text-blue-800',
                'processing': 'bg-indigo-100 text-indigo-800',
                'shipped': 'bg-purple-100 text-purple-800',
                'completed': 'bg-green-100 text-green-800',
                'cancelled': 'bg-red-100 text-red-800',
            };
            return map[status] || 'bg-gray-100 text-gray-800';
        },

        formatDate(date) {
            if (!date) return '-';
            return new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
        }
    }
}
</script>
@endpush
@endsection