@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-12">
    <div class="mb-12">
        <h1 class="text-4xl font-bold text-gray-900">🧪 TaPrestation Features Demo</h1>
        <p class="text-gray-600 mt-2">Accédez à toutes les nouvelles features créées</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- PAYMENTS SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-blue-600">
            <div class="bg-gradient-to-r from-blue-50 to-blue-100 p-6">
                <h2 class="text-xl font-bold text-blue-900">💳 Payments</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/payments/booking" class="block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Booking Payment Form
                </a>
                <a href="/demo/payments/history" class="block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Transaction History
                </a>
            </div>
        </div>

        <!-- SUBSCRIPTIONS SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-green-600">
            <div class="bg-gradient-to-r from-green-50 to-green-100 p-6">
                <h2 class="text-xl font-bold text-green-900">🎁 Subscriptions</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/subscriptions/plans" class="block bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    View Plans
                </a>
                <a href="/demo/subscriptions/my" class="block bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    My Subscription
                </a>
            </div>
        </div>

        <!-- NOTIFICATIONS SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-purple-600">
            <div class="bg-gradient-to-r from-purple-50 to-purple-100 p-6">
                <h2 class="text-xl font-bold text-purple-900">🔔 Notifications</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/notification-settings" class="block bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Settings
                </a>
            </div>
        </div>

        <!-- ADDRESS BOOK SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-red-600">
            <div class="bg-gradient-to-r from-red-50 to-red-100 p-6">
                <h2 class="text-xl font-bold text-red-900">📍 Address Book</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/address-book" class="block bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    My Addresses
                </a>
            </div>
        </div>

        <!-- INVENTORY SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-yellow-600">
            <div class="bg-gradient-to-r from-yellow-50 to-yellow-100 p-6">
                <h2 class="text-xl font-bold text-yellow-900">📦 Inventory</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/inventory" class="block bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Dashboard
                </a>
                <a href="/demo/inventory/edit" class="block bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Add/Edit Item
                </a>
            </div>
        </div>

        <!-- AUCTIONS SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-orange-600">
            <div class="bg-gradient-to-r from-orange-50 to-orange-100 p-6">
                <h2 class="text-xl font-bold text-orange-900">🎯 Auctions</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/auctions/bids" class="block bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Service Bids
                </a>
                <a href="/demo/auctions/my-bids" class="block bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    My Bids
                </a>
                <a href="/demo/auctions/stats" class="block bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Statistics
                </a>
            </div>
        </div>

        <!-- DELIVERY SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-cyan-600">
            <div class="bg-gradient-to-r from-cyan-50 to-cyan-100 p-6">
                <h2 class="text-xl font-bold text-cyan-900">🚚 Delivery</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/delivery/providers" class="block bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Providers
                </a>
                <a href="/demo/delivery/tracking" class="block bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Tracking
                </a>
                <a href="/demo/delivery/orders" class="block bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Orders
                </a>
            </div>
        </div>

        <!-- ADMIN SECTION -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-t-4 border-gray-600">
            <div class="bg-gradient-to-r from-gray-50 to-gray-100 p-6">
                <h2 class="text-xl font-bold text-gray-900">👨‍💼 Admin</h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="/demo/admin/dashboard" class="block bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    Dashboard
                </a>
                <a href="/demo/admin/users" class="block bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold text-center transition-colors">
                    User Management
                </a>
            </div>
        </div>
    </div>

    <!-- DOCUMENTATION SECTION -->
    <div class="mt-12 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg shadow-lg p-8 border-l-4 border-blue-600">
        <h3 class="text-2xl font-bold text-gray-900 mb-4">📚 Documentation</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <a href="/" class="text-blue-600 hover:text-blue-700 font-semibold">
                ← Back to Home
            </a>
            <p class="text-gray-600">
                All features are now accessible from this demo page. Click on any card above to explore!
            </p>
        </div>
    </div>

    <!-- STATS -->
    <div class="mt-12 grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <p class="text-gray-600 text-sm">Total Features</p>
            <p class="text-3xl font-bold text-blue-600 mt-2">15</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <p class="text-gray-600 text-sm">View Templates</p>
            <p class="text-3xl font-bold text-green-600 mt-2">179</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <p class="text-gray-600 text-sm">Controllers</p>
            <p class="text-3xl font-bold text-purple-600 mt-2">7</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 text-center">
            <p class="text-gray-600 text-sm">API Routes</p>
            <p class="text-3xl font-bold text-orange-600 mt-2">70+</p>
        </div>
    </div>
</div>
@endsection