@extends('layouts.admin')

@section('title', 'Work in Progress')

@section('header', 'Work in Progress')

@section('content')
<div class="relative bg-gradient-to-br from-[#BF6679]/10 to-[#A34E5D]/10 min-h-screen p-8">
    <!-- Background decoration -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-[#BF6679]/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-[#A34E5D]/20 rounded-full blur-3xl"></div>
    </div>
    
    <div class="relative max-w-4xl mx-auto">
        <div class="text-center">
            <!-- Animated Icon -->
            <div class="mb-8">
                <div class="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-r from-[#BF6679] to-[#A34E5D] rounded-full shadow-2xl animate-pulse">
                    <i class="fas fa-tools text-white text-4xl animate-spin"></i>
                </div>
            </div>
            
            <!-- Main Title -->
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                Work in
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-[#BF6679] to-[#A34E5D]">
                    Progress
                </span>
            </h1>
            
            <!-- Subtitle -->
            <p class="text-xl text-gray-600 mb-8">This page is currently under development</p>
            
            <!-- Progress Animation -->
            <div class="mb-12">
                <div class="max-w-md mx-auto">
                    <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-6">
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-sm font-semibold text-gray-700">Development Progress</span>
                            <span class="text-sm font-bold text-[#BF6679]">75%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
                            <div class="bg-gradient-to-r from-[#BF6679] to-[#A34E5D] h-3 rounded-full animate-pulse" style="width: 75%"></div>
                        </div>
                        <div class="mt-4 flex space-x-2">
                            <div class="flex-1 h-2 bg-gradient-to-r from-[#BF6679] to-[#A34E5D] rounded animate-pulse"></div>
                            <div class="flex-1 h-2 bg-gradient-to-r from-[#BF6679] to-[#A34E5D] rounded animate-pulse" style="animation-delay: 0.2s"></div>
                            <div class="flex-1 h-2 bg-gradient-to-r from-[#BF6679] to-[#A34E5D] rounded animate-pulse" style="animation-delay: 0.4s"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('admin.dashboard') }}" class="inline-flex items-center bg-gradient-to-r from-[#BF6679] to-[#A34E5D] text-white px-8 py-3 rounded-xl font-semibold hover:from-[#A34E5D] hover:to-[#8B3A5B] transition-all duration-300 shadow-xl transform hover:scale-105">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Dashboard
                </a>
                
                <button onclick="history.back()" class="inline-flex items-center bg-white/95 backdrop-blur-sm text-gray-700 px-8 py-3 rounded-xl font-semibold hover:bg-white transition-all duration-300 shadow-lg border border-gray-200">
                    <i class="fas fa-arrow-right mr-2"></i>
                    Previous Page
                </button>
            </div>
            
            <!-- Notification -->
            <div class="mt-12 max-w-lg mx-auto">
                <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-blue-600 text-xl mr-3 mt-1"></i>
                        <div>
                            <h4 class="text-blue-800 font-bold mb-1">Coming Soon!</h4>
                            <p class="text-blue-700 text-sm">We're working hard to bring you this feature. Check back soon for updates!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>
@endsection