<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document Verification</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS v3 Play CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Outfit', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81',
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.2s ease-out forwards',
                        'slide-up': 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    <style type="text/tailwindcss">
        @layer utilities {
            .glass {
                @apply bg-white/70 dark:bg-slate-900/70 backdrop-blur-md border border-slate-200/50 dark:border-slate-800/50;
            }
            .glass-hover {
                @apply hover:bg-white/90 dark:hover:bg-slate-900/90 transition-all duration-300;
            }
            .sidebar-collapsed .sidebar-label,
            .sidebar-collapsed .sidebar-count,
            .sidebar-collapsed .sidebar-logout-text,
            .sidebar-collapsed .sidebar-brand-text {
                display: none !important;
            }
            .sidebar-collapsed .sidebar-item {
                justify-content: center !important;
            }
            .sidebar-collapsed .sidebar-icon {
                margin-right: 0 !important;
            }
            .sidebar-collapsed .sidebar-brand {
                justify-content: center !important;
            }
            .sidebar-collapsed .sidebar-logout {
                justify-content: center !important;
            }
        }
    </style>
    <style>
        /* Prevent transitions during loading */
        .preload * {
            transition: none !important;
        }
    </style>
    @stack('styles')
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 min-h-screen flex flex-col font-sans transition-colors duration-300 preload">
<!-- Inline Script to prevent Theme Flash -->
<script>
    (function () {
        const theme = localStorage.getItem('theme') || 'light';
        if (theme === 'dark') {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    })();
</script>

<div class="min-h-screen flex flex-row w-full overflow-hidden">
    <!-- SIDEBAR -->
    <aside id="adminSidebar" class="relative w-72 bg-white dark:bg-slate-900 border-r border-slate-200/50 dark:border-slate-800/50 shadow-xl shadow-slate-100/50 dark:shadow-none transition-all duration-300 flex flex-col justify-between z-30">
        @php
            $currentRoute = request()->route()->getName();
            $currentSidebarType = request()->query('type');
            $typesCounts = [
                'all' => \App\Models\VerificationLog::count(),
                'aadhaar_otp_send' => \App\Models\VerificationLog::where('verification_type', 'aadhaar_otp_send')->count(),
                'aadhaar_otp_submit' => \App\Models\VerificationLog::where('verification_type', 'aadhaar_otp_submit')->count(),
                'pan' => \App\Models\VerificationLog::where('verification_type', 'like', 'pan%')->count(),
                'aadhaar_pan_link' => \App\Models\VerificationLog::where('verification_type', 'like', 'aadhaar_pan_link%')->count(),
                'gst' => \App\Models\VerificationLog::where('verification_type', 'like', 'gst%')->count(),
                'bank' => \App\Models\VerificationLog::where('verification_type', 'like', 'bank%')->count(),
                'obf' => \App\Models\VerificationLog::where('verification_type', 'like', 'obf%')->count(),
                'user_creation' => \App\Models\VerificationLog::where('verification_type', 'like', 'user_creation%')->count(),
            ];
        @endphp

        <div>
            <!-- Sidebar Brand Header -->
            <div class="h-20 flex items-center justify-between px-6 border-b border-slate-200/50 dark:border-slate-800/50 sidebar-brand">
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 text-white rounded-2xl flex items-center justify-center text-lg font-black shadow-lg shadow-indigo-500/20">
                        DV
                    </div>
                    <div class="sidebar-brand-text">
                        <div class="text-sm font-extrabold tracking-wide uppercase bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 bg-clip-text text-transparent">Verification Hub</div>
                    </div>
                </div>
            </div>

            <!-- Navigation Links -->
            <nav class="p-4 space-y-1">
                @php
                    $isDashboardActive = $currentRoute === 'admin.dashboard';
                    $isClientsActive = $currentRoute === 'admin.clients';
                    $baseLinkClasses = 'flex items-center justify-between py-3 px-4 rounded-2xl transition-all duration-200 group font-semibold text-sm';
                    $activeLinkClasses = 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg shadow-indigo-500/20';
                    $inactiveLinkClasses = 'text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800/40 hover:text-slate-900 dark:hover:text-white';
                @endphp
                <a href="{{ route('admin.dashboard') }}" class="sidebar-item {{ $baseLinkClasses }} {{ $isDashboardActive ? $activeLinkClasses : $inactiveLinkClasses }}">
                    <span class="flex items-center gap-3">
                        <i class="sidebar-icon bi bi-grid-1x2-fill text-lg"></i>
                        <span class="sidebar-label">Dashboard</span>
                    </span>
                </a>

                <a href="{{ route('admin.clients') }}" class="sidebar-item {{ $baseLinkClasses }} {{ $isClientsActive ? $activeLinkClasses : $inactiveLinkClasses }}">
                    <span class="flex items-center gap-3">
                        <i class="sidebar-icon bi bi-people-fill text-lg"></i>
                        <span class="sidebar-label">Clients & Partners</span>
                    </span>
                    <span class="sidebar-count text-xs px-2 py-0.5 rounded-full font-bold transition-all duration-200 {{ $isClientsActive ? 'bg-white/20 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 group-hover:bg-slate-200 dark:group-hover:bg-slate-700/60' }}">{{ \App\Models\ApiClient::count() }}</span>
                </a>

                <div class="pt-6 pb-2 px-4 text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest sidebar-label">Services Logs</div>

                @php
                    $verifications = [
                        'all' => ['label' => 'All Logs', 'icon' => 'bi bi-collection-fill', 'count' => $typesCounts['all'], 'route' => route('admin.verifications')],
                        'aadhaar_otp_send' => ['label' => 'Aadhar OTP Send', 'icon' => 'bi bi-send-fill', 'count' => $typesCounts['aadhaar_otp_send'], 'route' => route('admin.verifications', ['type' => 'aadhaar_otp_send'])],
                        'aadhaar_otp_submit' => ['label' => 'Aadhar OTP Submit', 'icon' => 'bi bi-person-vcard-fill', 'count' => $typesCounts['aadhaar_otp_submit'], 'route' => route('admin.verifications', ['type' => 'aadhaar_otp_submit'])],
                        'pan' => ['label' => 'PAN Card', 'icon' => 'bi bi-card-heading', 'count' => $typesCounts['pan'], 'route' => route('admin.verifications', ['type' => 'pan'])],
                        'aadhaar_pan_link' => ['label' => 'Aadhar-PAN Link', 'icon' => 'bi bi-link-45deg', 'count' => $typesCounts['aadhaar_pan_link'], 'route' => route('admin.verifications', ['type' => 'aadhaar_pan_link'])],
                        'gst' => ['label' => 'GST Certificate', 'icon' => 'bi bi-building-fill-check', 'count' => $typesCounts['gst'], 'route' => route('admin.verifications', ['type' => 'gst'])],
                        'bank' => ['label' => 'Bank Verification', 'icon' => 'bi bi-bank', 'count' => $typesCounts['bank'], 'route' => route('admin.verifications', ['type' => 'bank'])],
                        'obf' => ['label' => 'OBF Validation', 'icon' => 'bi bi-file-earmark-check-fill', 'count' => $typesCounts['obf'], 'route' => route('admin.verifications', ['type' => 'obf'])],
                        'user_creation' => ['label' => 'User Creation', 'icon' => 'bi bi-person-plus-fill', 'count' => $typesCounts['user_creation'], 'route' => route('admin.verifications', ['type' => 'user_creation'])],
                    ];
                @endphp

                @foreach($verifications as $key => $item)
                    @php
                        $isActive = ($currentRoute === 'admin.verifications') && ($key === 'all' ? !$currentSidebarType : $currentSidebarType === $key);
                    @endphp
                    <a href="{{ $item['route'] }}" class="sidebar-item {{ $baseLinkClasses }} {{ $isActive ? $activeLinkClasses : $inactiveLinkClasses }}">
                        <span class="flex items-center gap-3">
                            <i class="sidebar-icon {{ $item['icon'] }} text-lg"></i>
                            <span class="sidebar-label">{{ $item['label'] }}</span>
                        </span>
                        <span class="sidebar-count text-xs px-2 py-0.5 rounded-full font-bold transition-all duration-200 {{ $isActive ? 'bg-white/20 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 group-hover:bg-slate-200 dark:group-hover:bg-slate-700/60' }}">{{ $item['count'] }}</span>
                    </a>
                @endforeach
            </nav>
        </div>

        <!-- Sidebar Bottom Footer Section -->
        <div class="p-4 border-t border-slate-200/50 dark:border-slate-800/50">
            <form method="POST" action="{{ route('admin.logout') }}">
                @csrf
                <button type="submit" class="sidebar-logout w-full flex items-center justify-between gap-3 py-3 px-4 rounded-2xl border border-rose-200/60 dark:border-rose-950/40 text-rose-500 dark:text-rose-400 hover:bg-rose-500 hover:text-white dark:hover:bg-rose-950/30 transition-all duration-200 font-bold text-sm focus:outline-none">
                    <span class="flex items-center gap-3">
                        <i class="bi bi-box-arrow-right text-lg"></i>
                        <span class="sidebar-logout-text">Logout</span>
                    </span>
                </button>
            </form>
        </div>
    </aside>

    <!-- MAIN APP CONTENT -->
    <div class="flex-1 flex flex-col min-w-0 overflow-y-auto" id="mainContent">
        <!-- HEADER -->
        <header class="h-20 sticky top-0 bg-white/70 dark:bg-slate-900/70 backdrop-blur-md border-b border-slate-200/50 dark:border-slate-800/50 px-6 md:px-8 flex items-center justify-between z-10">
            <div class="flex items-center gap-4">
                <!-- Sidebar Toggle Button -->
                <button id="sidebarToggle" type="button" class="h-10 w-10 rounded-2xl border border-slate-205/60 dark:border-slate-800/60 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 shadow-sm hover:bg-slate-55 dark:hover:bg-slate-800 flex items-center justify-center hover:scale-105 active:scale-95 transition-all focus:outline-none mr-2" aria-label="Toggle Sidebar">
                    <i id="sidebarToggleIcon" class="bi bi-list text-xl"></i>
                </button>
                <h2 class="text-lg font-bold tracking-tight text-slate-800 dark:text-slate-100 uppercase">Control Room</h2>
            </div>
            
            <div class="flex items-center gap-4">
                <!-- Theme Toggle Button -->
                <button id="themeToggleBtn" class="h-10 w-10 rounded-2xl border border-slate-200/60 dark:border-slate-800/60 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 shadow-sm hover:bg-slate-50 dark:hover:bg-slate-805 flex items-center justify-center hover:scale-105 active:scale-95 transition-all focus:outline-none" aria-label="Toggle Theme">
                    <i id="themeToggleIcon" class="bi bi-moon-fill text-sm"></i>
                </button>

                <!-- Profile Dropdown Trigger -->
                <div class="relative">
                    <button id="userDropdownTrigger" class="flex items-center gap-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 pl-3 pr-4 py-1.5 rounded-2xl shadow-sm hover:bg-slate-50 dark:hover:bg-slate-800 active:scale-98 transition-all focus:outline-none">
                        <div class="h-7 w-7 rounded-xl bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 text-white flex items-center justify-center font-black text-xs shadow-md shadow-indigo-500/10">
                            {{ strtoupper(substr(auth()->user()?->name ?? 'A', 0, 1)) }}
                        </div>
                        <span class="font-bold text-slate-700 dark:text-slate-200 text-sm hidden sm:inline">{{ auth()->user()?->name ?? 'Admin' }}</span>
                        <i class="bi bi-chevron-down text-slate-400 text-xs"></i>
                    </button>
                    
                    <!-- Dropdown Menu -->
                    <div id="userDropdownMenu" class="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-2xl py-2 hidden z-50 animate-slide-up">
                        <div class="px-4 py-2 text-xs text-slate-400 dark:text-slate-505 font-bold uppercase tracking-widest">Admin Account</div>
                        <button onclick="openModal('changePasswordModal')" class="w-full text-left px-4 py-2.5 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800/80 flex items-center gap-3 transition-colors focus:outline-none font-semibold">
                            <i class="bi bi-key-fill text-indigo-500"></i> Change Password
                        </button>
                        <hr class="border-slate-100 dark:border-slate-800 my-1.5">
                        <form method="POST" action="{{ route('admin.logout') }}">
                            @csrf
                            <button type="submit" class="w-full text-left px-4 py-2.5 text-sm text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-950/20 flex items-center gap-3 transition-colors focus:outline-none font-semibold">
                                <i class="bi bi-box-arrow-right"></i> Logout
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </header>

        <!-- MAIN VIEW PORT -->
        <main class="flex-1 p-6 md:p-8">
            <div class="mx-auto animate-fade-in">
                @yield('content')
            </div>
        </main>
    </div>
</div>

@stack('modals')

<!-- CHANGE PASSWORD MODAL -->
<div id="changePasswordModal" class="hidden fixed inset-0 bg-slate-950/45 dark:bg-black/60 backdrop-blur-sm items-center justify-center z-[9999] p-4">
    <div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-200 dark:border-slate-800 w-full max-w-md p-6 overflow-hidden animate-slide-up relative">
        <!-- Gradient top glow -->
        <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
        
        <div class="flex justify-between items-center mb-6">
            <div class="flex items-center gap-2.5">
                <div class="h-9 w-9 rounded-xl bg-indigo-500/10 text-indigo-500 flex items-center justify-center"><i class="bi bi-shield-lock-fill"></i></div>
                <h3 class="text-base font-bold text-slate-800 dark:text-slate-100">Security Credentials</h3>
            </div>
            <button onclick="closeModal('changePasswordModal')" class="h-8 w-8 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl flex items-center justify-center transition-colors focus:outline-none"><i class="bi bi-x-lg text-sm"></i></button>
        </div>
        
        <form action="{{ route('admin.password.change') }}" method="POST">
            @csrf
            <div class="mb-5">
                <label class="block text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">New Password</label>
                <div class="relative">
                    <input type="password" name="new_password" required minlength="6" placeholder="Minimum 6 characters" class="w-full bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-100 border border-slate-200 dark:border-slate-800 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all focus:outline-none pl-10">
                    <i class="bi bi-key absolute left-3.5 top-3.5 text-slate-400 text-sm"></i>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-3 border-t border-slate-100 dark:border-slate-800">
                <button type="button" onclick="closeModal('changePasswordModal')" class="px-5 py-2.5 border border-slate-200 dark:border-slate-800 rounded-2xl text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800/80 text-sm font-bold transition-all focus:outline-none">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-lg shadow-indigo-500/10 hover:opacity-95 text-sm font-bold transition-all focus:outline-none">Update Password</button>
            </div>
        </form>
    </div>
</div>

@stack('scripts')
<script>
    // Remove preload class after page load to allow transitions
    window.addEventListener('load', function() {
        document.body.classList.remove('preload');
    });

    document.addEventListener('DOMContentLoaded', function () {
        // Sidebar Collapser Toggle
        const sidebar = document.getElementById('adminSidebar');
        const toggle = document.getElementById('sidebarToggle');
        const icon = document.getElementById('sidebarToggleIcon');

        if (toggle && sidebar) {
            // Restore sidebar status from local storage
            const isSidebarCollapsed = localStorage.getItem('sidebar_collapsed') === 'true';
            if (isSidebarCollapsed) {
                sidebar.classList.add('sidebar-collapsed');
                sidebar.classList.remove('w-72');
                sidebar.classList.add('w-20');
                if (icon) icon.className = 'bi bi-text-indent-left text-xl';
            }

            toggle.addEventListener('click', function () {
                const collapsed = sidebar.classList.contains('sidebar-collapsed');
                if (collapsed) {
                    sidebar.classList.remove('sidebar-collapsed');
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-72');
                    if (icon) icon.className = 'bi bi-list text-xl';
                    localStorage.setItem('sidebar_collapsed', 'false');
                } else {
                    sidebar.classList.add('sidebar-collapsed');
                    sidebar.classList.remove('w-72');
                    sidebar.classList.add('w-20');
                    if (icon) icon.className = 'bi bi-text-indent-left text-xl';
                    localStorage.setItem('sidebar_collapsed', 'true');
                }
            });
        }

        // Header User Profile Menu Dropdown Trigger
        const trigger = document.getElementById('userDropdownTrigger');
        const menu = document.getElementById('userDropdownMenu');

        if (trigger && menu) {
            trigger.addEventListener('click', function (e) {
                e.stopPropagation();
                menu.classList.toggle('hidden');
            });

            document.addEventListener('click', function () {
                menu.classList.add('hidden');
            });
        }

        // Light/Dark Theme Switcher Logic
        const themeBtn = document.getElementById('themeToggleBtn');
        const themeIcon = document.getElementById('themeToggleIcon');

        function updateThemeIcon(theme) {
            if (theme === 'dark') {
                themeIcon.className = 'bi bi-sun-fill text-yellow-400';
            } else {
                themeIcon.className = 'bi bi-moon-fill';
            }
        }

        // Initialize button icon
        const currentTheme = localStorage.getItem('theme') || 'light';
        updateThemeIcon(currentTheme);

        if (themeBtn) {
            themeBtn.addEventListener('click', function () {
                const isDark = document.documentElement.classList.contains('dark');
                if (isDark) {
                    document.documentElement.classList.remove('dark');
                    localStorage.setItem('theme', 'light');
                    updateThemeIcon('light');
                } else {
                    document.documentElement.classList.add('dark');
                    localStorage.setItem('theme', 'dark');
                    updateThemeIcon('dark');
                }
            });
        }
    });

    // Helper functions for modal actions
    function openModal(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            // Auto focus first input in form
            const firstInput = modal.querySelector('input, select');
            if (firstInput) {
                setTimeout(() => firstInput.focus(), 150);
            }
        }
    }

    function closeModal(id) {
        const modal = document.getElementById(id);
        if (modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    }
</script>
</body>
</html>
