<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Input Data Pengguna - Silakan masukkan informasi pengguna">
    <title>Input Data - Dashboard</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
</head>

<body>

    @if(session('success'))
    <div class="toast success show">
        {{ session('success') }}
    </div>
    @endif

    <!-- Mobile Top Bar -->
    <div class="mobile-topbar">
        <div class="mobile-topbar-logo">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
            </svg>
        </div>
        <span class="mobile-topbar-title">DASHBOARD</span>
        <span class="mobile-topbar-page">Input Data</span>
        <button class="mobile-theme-btn" id="mobileThemeBtn" title="Ganti Tema">
            <svg id="mobileThemeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="5"/>
                <line x1="12" y1="1" x2="12" y2="3"/>
                <line x1="12" y1="21" x2="12" y2="23"/>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
                <line x1="1" y1="12" x2="3" y2="12"/>
                <line x1="21" y1="12" x2="23" y2="12"/>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
            </svg>
        </button>
    </div>

    <!-- Mobile Bottom Navigation -->
    <nav class="mobile-bottom-nav">
        <a href="/dashboard" class="mobile-nav-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                <polyline points="9 22 9 12 15 12 15 22" />
            </svg>
            Dashboard
        </a>
        <a href="/input-data" class="mobile-nav-item active">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" />
                <line x1="9" y1="3" x2="9" y2="21" />
            </svg>
            Input Data
        </a>
        <a href="/histori" class="mobile-nav-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" />
                <line x1="8" y1="9" x2="16" y2="9" />
                <line x1="8" y1="13" x2="14" y2="13" />
                <line x1="8" y1="17" x2="12" y2="17" />
            </svg>
            Histori
        </a>
        <form method="POST" action="{{ route('logout') }}" style="flex:1;display:contents">
            @csrf
            <button type="submit" class="mobile-nav-item logout-nav">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" />
                    <polyline points="16 17 21 12 16 7" />
                    <line x1="21" y1="12" x2="9" y2="12" />
                </svg>
                Logout
            </button>
        </form>
    </nav>

    <div class="dashboard-layout">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                    </svg>
                </div>
                <span class="sidebar-title">DASHBOARD</span>
            </div>

            <nav class="sidebar-nav">
                <a href="/dashboard" class="nav-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                        <polyline points="9 22 9 12 15 12 15 22" />
                    </svg>
                    <span>Dashboard</span>
                </a>
                <a href="/input-data" class="nav-item active">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="18" height="18" rx="2" />
                        <line x1="9" y1="3" x2="9" y2="21" />
                    </svg>
                    <span>Input Data</span>
                </a>
                <a href="/histori" class="nav-item">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="18" height="18" rx="2" />
                        <line x1="8" y1="9" x2="16" y2="9" />
                        <line x1="8" y1="13" x2="14" y2="13" />
                        <line x1="8" y1="17" x2="12" y2="17" />
                    </svg>
                    <span>Histori</span>
                </a>
            </nav>

            <div class="sidebar-footer">
                <button class="theme-toggle-btn" id="themeToggleBtn" title="Ganti Tema">
                    <svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="5"/>
                        <line x1="12" y1="1" x2="12" y2="3"/>
                        <line x1="12" y1="21" x2="12" y2="23"/>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
                        <line x1="1" y1="12" x2="3" y2="12"/>
                        <line x1="21" y1="12" x2="23" y2="12"/>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                    </svg>
                    <span id="themeLabel">Mode Terang</span>
                    <div class="theme-pill"></div>
                </button>
                <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="nav-item logout" style="background:none;border:none;width:100%;text-align:left;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10" />
                        <polyline points="12 6 12 12 16 14" />
                    </svg>
                    <span>Logout</span>
                </button>
                </form>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="content-wrapper">
                <div class="page-header">
                    <h1 class="page-title">INPUT DATA PENGGUNA</h1>
                    <p class="page-subtitle">Silakan masukkan informasi pengguna</p>
                </div>

                <div class="content-card form-layout">

                    <!-- FORM -->
                    <div class="form-section">
                        <form method="POST" action="{{ route('input.store') }}">
                            @csrf

                            <!-- Nama -->
                            <div class="form-group">
                                <label class="form-label">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
                                        <circle cx="12" cy="7" r="4" />
                                    </svg>
                                    Nama
                                </label>
                                <input type="text" class="form-input" id="inputNama" name="name" placeholder="Nama lengkap" required>
                            </div>

                            <!-- Email -->
                            <div class="form-group">
                                <label class="form-label">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <rect x="2" y="4" width="20" height="16" rx="2" />
                                        <path d="M22 4L12 13L2 4" />
                                    </svg>
                                    Email
                                </label>
                                <input type="email" class="form-input" id="inputEmail" name="email" placeholder="Email" required>
                            </div>

                            <!-- Jenis Kelamin -->
                            <div class="form-group">
                                <label class="form-label">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <circle cx="12" cy="8" r="4"/>
                                        <path d="M12 12v8M8 16h8"/>
                                    </svg>
                                    Jenis Kelamin
                                </label>
                                <select class="form-select" id="inputGender" name="gender" required>
                                    <option value="" disabled selected>-- Pilih Jenis Kelamin --</option>
                                    <option value="laki-laki">Laki-laki</option>
                                    <option value="perempuan">Perempuan</option>
                                </select>
                            </div>

                            <!-- Tanggal Lahir -->
                            <div class="form-group">
                                <label class="form-label">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                        <line x1="16" y1="2" x2="16" y2="6"/>
                                        <line x1="8" y1="2" x2="8" y2="6"/>
                                        <line x1="3" y1="10" x2="21" y2="10"/>
                                    </svg>
                                    Tanggal Lahir
                                </label>
                                <div class="date-row">
                                    <select class="form-select" id="inputDay" name="day" required>
                                        <option value="" disabled selected>Tanggal</option>
                                        @for($d = 1; $d <= 31; $d++)
                                            <option value="{{ $d }}">{{ $d }}</option>
                                        @endfor
                                    </select>
                                    <select class="form-select" id="inputMonth" name="month" required>
                                        <option value="" disabled selected>Bulan</option>
                                        <option value="1">Januari</option>
                                        <option value="2">Februari</option>
                                        <option value="3">Maret</option>
                                        <option value="4">April</option>
                                        <option value="5">Mei</option>
                                        <option value="6">Juni</option>
                                        <option value="7">Juli</option>
                                        <option value="8">Agustus</option>
                                        <option value="9">September</option>
                                        <option value="10">Oktober</option>
                                        <option value="11">November</option>
                                        <option value="12">Desember</option>
                                    </select>
                                    <select class="form-select" id="inputYear" name="year" required>
                                        <option value="" disabled selected>Tahun</option>
                                        @for($y = date('Y'); $y >= 1940; $y--)
                                            <option value="{{ $y }}">{{ $y }}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div>

                            <!-- Voice Keyword -->
                            <div class="form-group">
                                <label class="form-label">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
                                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                                        <line x1="12" y1="19" x2="12" y2="23"/>
                                        <line x1="8" y1="23" x2="16" y2="23"/>
                                    </svg>
                                    Register Voice Keyword
                                </label>
                                <input type="text" class="form-input" id="inputVoiceKeyword" name="voice_keyword"
                                    placeholder="Masukkan kata kunci suara (contoh: buka pintu)" required>
                                <small style="color: var(--text-muted, #8892a4); font-size: 0.75rem; margin-top: 4px; display:block;">
                                    🎙️ Kata kunci ini akan digunakan untuk membuka pintu dengan suara
                                </small>
                            </div>

                            <!-- Register Wajah -->
                            <div class="form-group">
                                <label class="form-label">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
                                    </svg>
                                    Register Wajah
                                </label>
                                <div style="
                                    background: rgba(99,102,241,0.08);
                                    border: 1px solid rgba(99,102,241,0.3);
                                    border-radius: 10px;
                                    padding: 14px 16px;
                                    display: flex;
                                    align-items: center;
                                    gap: 12px;
                                    color: #a5b4fc;
                                    font-size: 0.875rem;
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="#a5b4fc" stroke-width="2" width="24" height="24">
                                        <circle cx="12" cy="8" r="4"/>
                                        <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
                                        <path d="M16 3.5c1.5.5 2.5 2 2.5 3.5s-1 3-2.5 3.5"/>
                                    </svg>
                                    <span>Wajah didaftarkan langsung di <strong>alat depan pintu</strong> setelah data disimpan</span>
                                </div>
                            </div>

                            <!-- Submit -->
                            <button type="submit" class="btn-submit" id="submitBtn">
                                SIMPAN DATA
                            </button>
                        </form>
                    </div>                    
                    <div class="image-section">
                        <img src="{{ asset('images/biometric.png') }}">
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="{{ asset('js/dashboard.js') }}" defer></script>
    <script>
        // ===== THEME TOGGLE =====
        (function() {
            const saved = localStorage.getItem('theme');
            if (saved === 'light') document.documentElement.classList.add('light');
        })();

        function updateThemeUI() {
            const isLight = document.documentElement.classList.contains('light');
            const moonSvg = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
            const sunSvg = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
            const icon = document.getElementById('themeIcon');
            const label = document.getElementById('themeLabel');
            const mobileIcon = document.getElementById('mobileThemeIcon');
            if (icon) icon.innerHTML = isLight ? moonSvg : sunSvg;
            if (mobileIcon) mobileIcon.innerHTML = isLight ? moonSvg : sunSvg;
            if (label) label.textContent = isLight ? 'Mode Gelap' : 'Mode Terang';
        }

        function toggleTheme() {
            const html = document.documentElement;
            html.classList.toggle('light');
            localStorage.setItem('theme', html.classList.contains('light') ? 'light' : 'dark');
            updateThemeUI();
        }

        document.addEventListener('DOMContentLoaded', function() {
            updateThemeUI();
            const btn = document.getElementById('themeToggleBtn');
            const mobileBtn = document.getElementById('mobileThemeBtn');
            if (btn) btn.addEventListener('click', toggleTheme);
            if (mobileBtn) mobileBtn.addEventListener('click', toggleTheme);
        });
    </script>
</body>

</html>