<!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="Dashboard - Sistem Biometric Door">
    <title>Dashboard - Sistem</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

    @if($errors->any())
    <div class="toast error show">
        {{ $errors->first() }}
    </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">Data Pengguna</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="{{ route('dashboard') }}" class="mobile-nav-item active">
            <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="{{ route('input-data') }}" 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="9" y1="3" x2="9" y2="21" />
            </svg>
            Input Data
        </a>
        <a href="{{ route('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="{{ route('dashboard') }}" class="nav-item active">
                    <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="{{ route('input-data') }}" 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="9" y1="3" x2="9" y2="21" />
                    </svg>
                    <span>Input Data</span>
                </a>
                <a href="{{ route('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">DASHBOARD</h1>
                    <p class="page-subtitle">Daftar pengguna yang telah terdaftar</p>
                </div>

                <div class="log-card">
                    <div class="log-card-header">Data Pengguna</div>
                    <div class="table-scroll-wrapper">
                    <table class="log-table" id="userTable">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Jenis Kelamin</th>
                                <th>Tanggal Lahir</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users ?? [] as $user)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->gender }}</td>
                                <td>{{ $user->birth_date }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5">Belum ada data pengguna</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    </div>
                    <div class="empty-state" id="emptyState" style="display:none;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="48"
                            height="48">
                            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
                            <circle cx="9" cy="7" r="4" />
                            <path d="M23 21v-2a4 4 0 00-3-3.87" />
                            <path d="M16 3.13a4 4 0 010 7.75" />
                        </svg>
                        <p>Belum ada data pengguna</p>
                        <a href="{{ route('input-data') }}" class="btn-submit"
                            style="margin-top:16px; font-size:0.82rem; padding:10px 28px;">+ Tambah Data</a>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Edit Modal -->
    <div class="modal-overlay" id="editModal" style="display:none;">
        <div class="modal-card">
            <div class="modal-header">
                <h2 class="modal-title">Edit Data Pengguna</h2>
                <button class="modal-close" onclick="closeEditModal()">&times;</button>
            </div>
            <form id="editForm" onsubmit="handleEditSave(event)">
                <input type="hidden" id="editId">
                <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="editNama" placeholder="Nama" required
                        style="max-width:100%">
                </div>
                <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="editEmail" placeholder="Email" required
                        style="max-width:100%">
                </div>
                <div class="form-group">
                    <label class="form-label">Jenis Kelamin</label>
                    <select class="form-select" id="editGender" required style="max-width:100%">
                        <option value="" disabled>Pilih Jenis Kelamin</option>
                        <option value="laki-laki">Laki-laki</option>
                        <option value="perempuan">Perempuan</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Tanggal Lahir</label>
                    <div class="date-row" style="max-width:100%">
                        <select class="form-select" id="editDay" required></select>
                        <select class="form-select" id="editMonth" required>
                            <option value="" disabled>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="editYear" required></select>
                    </div>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-cancel" onclick="closeEditModal()">Batal</button>
                    <button type="submit" class="btn-submit" style="margin:0;">SIMPAN</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal-overlay" id="deleteModal" style="display:none;">
        <div class="modal-card modal-card-sm">
            <div class="modal-header">
                <h2 class="modal-title">Hapus Data</h2>
                <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
            </div>
            <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 24px;">
                Apakah Anda yakin ingin menghapus data pengguna <strong id="deleteUserName"
                    style="color:var(--text-primary)"></strong>?
            </p>
            <div class="modal-actions">
                <button type="button" class="btn-cancel" onclick="closeDeleteModal()">Batal</button>
                <button type="button" class="btn-danger" id="confirmDeleteBtn">HAPUS</button>
            </div>
        </div>
    </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>