@extends('layouts.user')

@section('title')
    Bid Market - Temporarily Unavailable
@endsection

@section('content')

<!-- Start Section -->
<section class="relative table w-full py-20 lg:py-24 md:pt-28 bg-gray-50 dark:bg-slate-800">
    <div class="container relative">
        <div class="text-center" style="max-width: 1200px; margin: 0 auto;">
            
            <!-- Animated Icon -->
            <div style="margin-bottom: 2rem; display: inline-block; position: relative;">
                <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
                    <div class="ping-circle" style="width: 128px; height: 128px; background: #f97316; border-radius: 50%; opacity: 0.2;"></div>
                </div>
                <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
                    <div class="pulse-circle" style="width: 96px; height: 96px; background: #f97316; border-radius: 50%; opacity: 0.3;"></div>
                </div>
                
                <div style="position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); border-radius: 50%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
                    <svg style="width: 56px; height: 56px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>

            <!-- Main Heading -->
            <h1 class="text-3xl font-semibold leading-normal md:text-4xl lg:text-5xl dark:text-white" style="margin-bottom: 1rem;">
                Bid Market
            </h1>
            <h2 class="text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl" style="color: #f97316; margin-bottom: 2rem;">
                Temporarily Unavailable
            </h2>

            <p class="text-slate-400 dark:text-gray-300" style="font-size: 1.125rem; max-width: 42rem; margin: 0 auto 2rem;">
                We're upgrading our bidding system to bring you a faster, more secure, and enhanced trading experience.
            </p>

            <!-- Status Badge -->
            <div style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; margin-bottom: 2rem; font-size: 0.875rem; font-weight: 600; color: #c2410c; background: #fed7aa; border-radius: 9999px;">
                <span style="position: relative; display: flex; width: 12px; height: 12px;">
                    <span class="ping-dot" style="position: absolute; display: inline-flex; width: 100%; height: 100%; background: #fb923c; border-radius: 50%; opacity: 0.75;"></span>
                    <span style="position: relative; display: inline-flex; width: 12px; height: 12px; background: #f97316; border-radius: 50%;"></span>
                </span>
                System Upgrade In Progress
            </div>

            <!-- Features Grid -->
            <div style="display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; margin-top: 3rem; max-width: 64rem; margin-left: auto; margin-right: auto;">
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;">
                    <!-- Feature 1 -->
                    <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md feature-card" style="padding: 1.5rem; transition: transform 0.2s;">
                        <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 1rem; background: #dbeafe; border-radius: 0.5rem;">
                            <svg style="width: 24px; height: 24px; color: #2563eb;" 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>
                        <h3 class="text-lg font-semibold mb-2">Faster Processing</h3>
                        <p class="text-slate-400" style="font-size: 0.875rem;">Lightning-fast bid execution with optimized performance</p>
                    </div>

                    <!-- Feature 2 -->
                    <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md feature-card" style="padding: 1.5rem; transition: transform 0.2s;">
                        <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 1rem; background: #d1fae5; border-radius: 0.5rem;">
                            <svg style="width: 24px; height: 24px; color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">Enhanced Security</h3>
                        <p class="text-slate-400" style="font-size: 0.875rem;">Advanced encryption and fraud protection for your bids</p>
                    </div>

                    <!-- Feature 3 -->
                    <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md feature-card" style="padding: 1.5rem; transition: transform 0.2s;">
                        <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 1rem; background: #e0e7ff; border-radius: 0.5rem;">
                            <svg style="width: 24px; height: 24px; color: #6366f1;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold mb-2">More Bidding Leverage</h3>
                        <p class="text-slate-400" style="font-size: 0.875rem;">Intuitive leverage to boost your trading capacity</p>
                    </div>
                </div>
            </div>

            <!-- Countdown Timer -->
            <!--<div style="margin-top: 4rem; margin-bottom: 2rem;">-->
            <!--    <p class="text-slate-400" style="margin-bottom: 1rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Expected Launch In</p>-->
            <!--    <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="days" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Days</span>-->
            <!--        </div>-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="hours" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Hours</span>-->
            <!--        </div>-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="minutes" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Minutes</span>-->
            <!--        </div>-->
            <!--        <div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1.5rem;">-->
            <!--            <span id="seconds" style="font-size: 2.25rem; font-weight: 700; color: #f97316;">--</span>-->
            <!--            <span class="text-slate-400" style="font-size: 0.75rem; text-transform: uppercase;">Seconds</span>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->

            <!-- Notification Signup -->
            <!--<div class="bg-white dark:bg-slate-900 shadow dark:shadow-gray-800 rounded-md" style="max-width: 28rem; margin: 3rem auto 0; padding: 1.5rem;">-->
            <!--    <h3 class="text-lg font-semibold mb-2">Get Notified When We're Back</h3>-->
            <!--    <p class="text-slate-400 mb-4" style="font-size: 0.875rem;">We'll send you an email as soon as bidding is available again</p>-->
            <!--    <form id="notify-form" style="display: flex; gap: 0.5rem;">-->
            <!--        <input -->
            <!--            type="email" -->
            <!--            id="notify-email" -->
            <!--            placeholder="Your email address" -->
            <!--            class="form-input border border-gray-100 dark:border-gray-800 dark:bg-slate-900 dark:text-slate-200"-->
            <!--            style="flex: 1; height: 40px; padding: 0.5rem 1rem; border-radius: 0.5rem; outline: none;"-->
            <!--            required-->
            <!--        >-->
            <!--        <button -->
            <!--            type="submit" -->
            <!--            class="btn bg-orange-500 hover:bg-orange-600"-->
            <!--            style="padding: 0.5rem 1.5rem; color: white; border: none; border-radius: 0.5rem; cursor: pointer; transition: background 0.2s;"-->
            <!--        >-->
            <!--            Notify Me-->
            <!--        </button>-->
            <!--    </form>-->
            <!--    <p id="notify-message" class="text-sm" style="margin-top: 0.5rem; color: #10b981; display: none;"></p>-->
            <!--</div>-->

            <!-- Back Button -->
            <div style="margin-top: 3rem;">
                <a href="{{ route('home') }}" class="btn bg-orange-500 hover:bg-orange-600" style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; color: white; border-radius: 0.5rem; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: all 0.2s;">
                    <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>
</section>
<!-- End Section -->

<style>
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.ping-circle {
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pulse-circle {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ping-dot {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.feature-card:hover {
    transform: scale(1.05);
}

.btn:hover {
    transform: scale(1.05);
}
</style>

<script>
// Countdown Timer
const countdownDate = new Date("{{ now()->addDays(3)->format('Y-m-d H:i:s') }}").getTime();

const countdown = setInterval(function() {
    const now = new Date().getTime();
    const distance = countdownDate - now;
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById("days").textContent = String(days).padStart(2, '0');
    document.getElementById("hours").textContent = String(hours).padStart(2, '0');
    document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
    document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
    
    if (distance < 0) {
        clearInterval(countdown);
        document.getElementById("days").textContent = "00";
        document.getElementById("hours").textContent = "00";
        document.getElementById("minutes").textContent = "00";
        document.getElementById("seconds").textContent = "00";
    }
}, 1000);

// Notification Form
document.getElementById('notify-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const email = document.getElementById('notify-email').value;
    const message = document.getElementById('notify-message');
    
    // Simulate API call (replace with actual endpoint)
    setTimeout(() => {
        message.textContent = '✓ Great! We\'ll notify you at ' + email + ' when bidding is back online.';
        message.style.display = 'block';
        document.getElementById('notify-email').value = '';
        
        setTimeout(() => {
            message.style.display = 'none';
        }, 5000);
    }, 500);
});
</script>

@endsection