@extends('layouts.user')

@section('title')
KYC Portal - Under Maintenance
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-center bg-no-repeat bg-cover"
            style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
    </div>

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex">
            <div class="lg:w-1/4 md:w-1/3 md:px-3">
                <div class="relative -mt-32 md:-mt-48">
                    <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="mb-5 text-center profile-pic">
                            <div>
                                <div class="relative mx-auto h-28 w-28">
                                    <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                </div>
                                <div class="mt-4">
                                    <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                    <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                </div>
                            </div>
                        </div>

                        <x-side-nav />
                    </div>
                </div>
            </div>

            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">
                <x-alert />

                <div class="bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <div class="items-center justify-between p-6 border-b border-gray-100 md:flex dark:border-gray-700">
                        <h5 class="text-xl font-semibold">KYC Verification Portal</h5>
                    </div>

                    <div class="p-6 text-center">
                        <!-- Icon -->
                        <div class="flex items-center justify-center w-20 h-20 mx-auto mb-6 bg-yellow-100 rounded-full dark:bg-yellow-900">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
                            </svg>
                        </div>

                        <h5 class="text-2xl font-semibold text-yellow-500">KYC Portal Under Maintenance</h5>
                        <p class="mt-3 text-slate-400">Our KYC verification portal is currently undergoing scheduled maintenance. Please check back at the time below.</p>

                        <!-- Resume Time -->
                        <div class="inline-block px-6 py-3 mt-6 rounded-md bg-slate-100 dark:bg-slate-800">
                            <p class="text-sm text-slate-500 dark:text-slate-400">Expected to resume on</p>
                            <p class="mt-1 text-lg font-semibold text-orange-500">25th February 2026 &mdash; 16:00 GMT</p>
                        </div>

                        <!-- Countdown -->
                        <div class="mt-8">
                            <p class="mb-3 text-sm text-slate-400">Time remaining</p>
                            <div id="countdown" class="text-3xl font-semibold text-orange-500">--</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    const targetDate = new Date("February 25, 2026 16:00:00 GMT").getTime();

    const countdown = setInterval(function () {
        const now = new Date().getTime();
        const distance = targetDate - now;

        if (distance < 0) {
            clearInterval(countdown);
            document.getElementById("countdown").innerHTML = "Portal is back online!";
            return;
        }

        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("countdown").innerHTML =
            days + "d " + hours + "h " + minutes + "m " + seconds + "s";
    }, 1000);
</script>

@endsection