@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="p-6">
    <!-- Error Alert -->
    <div id="error-alert" class="hidden mb-6">
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
            <strong class="font-bold">Error!</strong>
            <span id="error-message" class="block sm:inline"></span>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 bg-blue-100 rounded-full">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-600 text-sm">Total Penjahit</h2>
                    <p class="text-2xl font-semibold text-gray-800" id="total-penjahit">-</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 bg-green-100 rounded-full">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-600 text-sm">Total Pelanggan</h2>
                    <p class="text-2xl font-semibold text-gray-800" id="total-pelanggan">-</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 bg-purple-100 rounded-full">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-600 text-sm">Total Pesanan</h2>
                    <p class="text-2xl font-semibold text-gray-800" id="total-bookings">-</p>
                </div>
            </div>
        </div>

        {{-- <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 bg-yellow-100 rounded-full">
                    <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-600 text-sm">Total Layanan</h2>
                    <p class="text-2xl font-semibold text-gray-800" id="total-services">-</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 bg-red-100 rounded-full">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                    </svg>
                </div>
                <div class="ml-4">
                    <h2 class="text-gray-600 text-sm">Rating Rata-rata</h2>
                    <p class="text-2xl font-semibold text-gray-800" id="average-rating">-</p>
                </div>
            </div>
        </div> --}}
    </div>

    <!-- Booking Statistics -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Status Pesanan</h2>
            <div class="space-y-4" id="booking-status">
                <!-- Status pesanan akan ditampilkan di sini -->
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Statistik Bulan Ini</h2>
            <div class="space-y-4" id="monthly-stats">
                <div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg">
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                        <span class="text-gray-600">Total Pesanan</span>
                    </div>
                    <span class="font-semibold text-blue-600" id="total-monthly-orders">-</span>
                </div>
                <div class="flex items-center justify-between p-4 bg-green-50 rounded-lg">
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                        <span class="text-gray-600">Pesanan Selesai</span>
                    </div>
                    <span class="font-semibold text-green-600" id="completed-monthly-orders">-</span>
                </div>
                <div class="flex items-center justify-between p-4 bg-yellow-50 rounded-lg">
                    <div class="flex items-center">
                        <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                        <span class="text-gray-600">Tingkat Penyelesaian</span>
                    </div>
                    <span class="font-semibold text-yellow-600" id="completion-rate">-</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Bookings and Top Tailors -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">Pesanan Terbaru</h2>
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                            <tr class="border-b">
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">ID</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Pelanggan</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Penjahit</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Status</th>
                                <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Tanggal</th>
                            </tr>
                        </thead>
                        <tbody id="recent-bookings">
                            <!-- Recent bookings akan ditampilkan di sini -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">Penjahit Teratas</h2>
                <div class="space-y-4" id="top-tailors">
                    <!-- Top tailors akan ditampilkan di sini -->
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Users -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Pengguna Terbaru</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr class="border-b">
                            <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">ID</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Nama</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Role</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-gray-600">Tanggal Daftar</th>
                        </tr>
                    </thead>
                    <tbody id="recent-users">
                        <!-- Recent users akan ditampilkan di sini -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Include Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', async function() {
    try {
        // Get token from session
        const token = '{{ session('api_token') }}';
        const tokenType = '{{ session('token_type') }}';

        if (!token) {
            window.location.href = '{{ route('admin.login') }}';
            return;
        }

        const response = await fetch(window.apiUrl('api/admin/dashboard'), {
            headers: {
                'Authorization': `${tokenType} ${token}`,
                'Accept': 'application/json'
            }
        });

        if (!response.ok) {
            if (response.status === 401) {
                // Unauthorized - redirect to login
                window.location.href = '{{ route('admin.login') }}';
                return;
            }
            throw new Error('Failed to fetch dashboard data');
        }

        const data = await response.json();

        if (data.status === 'success') {
            // Update summary cards
            document.getElementById('total-penjahit').textContent = data.data.summary.total_penjahit;
            document.getElementById('total-pelanggan').textContent = data.data.summary.total_pelanggan;
            document.getElementById('total-bookings').textContent = data.data.summary.total_bookings;
            // document.getElementById('total-services').textContent = data.data.summary.total_services;
            // document.getElementById('average-rating').textContent = data.data.summary.average_rating.toFixed(1);

            // Update booking status
            const statusColors = {
                'reservasi': 'blue',
                'diproses': 'yellow',
                'selesai': 'green'
            };

            const bookingStatusHtml = Object.entries(data.data.booking_statistics.by_status)
                .map(([status, count]) => `
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-${statusColors[status]}-500 mr-2"></div>
                            <span class="text-gray-600 capitalize">${status}</span>
                        </div>
                        <span class="font-semibold">${count}</span>
                    </div>
                `).join('');
            document.getElementById('booking-status').innerHTML = bookingStatusHtml;

            // Update recent bookings
            const recentBookingsHtml = data.data.recent_bookings.map(booking => `
                <tr class="border-b hover:bg-gray-50">
                    <td class="py-3 px-4">#${booking.id}</td>
                    <td class="py-3 px-4">${booking.customer_name}</td>
                    <td class="py-3 px-4">${booking.tailor_name}</td>
                    <td class="py-3 px-4">
                        <span class="px-2 py-1 text-xs rounded-full capitalize
                            ${booking.status === 'reservasi' ? 'bg-blue-100 text-blue-800' : ''}
                            ${booking.status === 'diproses' ? 'bg-yellow-100 text-yellow-800' : ''}
                            ${booking.status === 'selesai' ? 'bg-green-100 text-green-800' : ''}">
                            ${booking.status}
                        </span>
                    </td>
                    <td class="py-3 px-4">${new Date(booking.created_at).toLocaleDateString('id-ID')}</td>
                </tr>
            `).join('');
            document.getElementById('recent-bookings').innerHTML = recentBookingsHtml;

            // Update top tailors
            const topTailorsHtml = data.data.top_tailors.map(tailor => `
                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                    <div>
                        <h3 class="font-semibold text-gray-800">${tailor.name}</h3>
                        <div class="flex items-center mt-1">
                            <span class="text-yellow-500">★</span>
                            <span class="text-sm text-gray-600 ml-1">${tailor.average_rating.toFixed(1)} (${tailor.total_ratings} ulasan)</span>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-gray-600">Total Pesanan</p>
                        <p class="font-semibold text-gray-800">${tailor.total_bookings}</p>
                    </div>
                </div>
            `).join('');
            document.getElementById('top-tailors').innerHTML = topTailorsHtml;

            // Update recent users
            const recentUsersHtml = data.data.recent_users.map(user => `
                <tr class="border-b hover:bg-gray-50">
                    <td class="py-3 px-4">#${user.id}</td>
                    <td class="py-3 px-4">${user.name}</td>
                    <td class="py-3 px-4">
                        <span class="px-2 py-1 text-xs rounded-full capitalize
                            ${user.role === 'penjahit' ? 'bg-purple-100 text-purple-800' : ''}
                            ${user.role === 'pelanggan' ? 'bg-green-100 text-green-800' : ''}">
                            ${user.role}
                        </span>
                    </td>
                    <td class="py-3 px-4">${new Date(user.created_at).toLocaleDateString('id-ID')}</td>
                </tr>
            `).join('');
            document.getElementById('recent-users').innerHTML = recentUsersHtml;

            // Update monthly statistics
            const monthlyData = data.data.booking_statistics.monthly[0];
            document.getElementById('total-monthly-orders').textContent = monthlyData.total_bookings;
            document.getElementById('completed-monthly-orders').textContent = monthlyData.completed_bookings;
            const completionRate = ((monthlyData.completed_bookings / monthlyData.total_bookings) * 100) || 0;
            document.getElementById('completion-rate').textContent = `${completionRate.toFixed(1)}%`;
        } else {
            throw new Error(data.message || 'Failed to load dashboard data');
        }
    } catch (error) {
        console.error('Error:', error);
        const errorAlert = document.getElementById('error-alert');
        const errorMessage = document.getElementById('error-message');
        errorAlert.classList.remove('hidden');
        errorMessage.textContent = error.message || 'Terjadi kesalahan saat memuat data dashboard';
    }
});
</script>
@endsection