<!-- layout -->
{{ @extends("__app.crm.layout__") }}
<!-- /layout -->

<!-- login css -->
<link type="text/css" rel="stylesheet" href="<?= asset_path('/css/web/auth.css')  ?>?v=1.0 ?>">
<!-- /login css -->

<!-- body -->
<main class="main bg-light">
    <!-- Animated Background Elements -->
    <div class="position-absolute top-0 start-0 w-100 h-100 overflow-hidden" style="z-index: 0;">
        <div class="position-absolute admin-login-bg-circle-1"></div>
        <div class="position-absolute admin-login-bg-circle-2"></div>
    </div>

    <!-- Main Container -->
    <div class="container-fluid min-vh-100 d-flex align-items-center justify-content-center position-relative pb-5" style="z-index: 1;">
        <div class="row justify-content-center w-100">
            <div class="col-12 col-md-10 col-lg-8 col-xl-6 p-4">
                <!-- Floating Login Card -->
                <div class="card border-0 shadow-lg overflow-hidden admin-login-card">
                    <!-- Header Section -->
                    <div class="text-center p-4 pb-0 admin-login-header">
                        <div class="d-inline-flex align-items-center justify-content-center mb-3 admin-login-logo">
                            <i class="fas fa-book-open fs-2 text-white"></i>
                        </div>
                        <h1 class="fw-bold mb-2 admin-login-title">
                            Daphas<span class="admin-login-title-highlight">Admin</span>
                        </h1>
                        <p class="text-muted mb-0 admin-login-subtitle">Dictionary Management System</p>
                    </div>

                    <!-- Message Display -->
                    <div class="px-5 pt-3">
                        <?php if (isset($message)): ?>
                            <div class="alert <?= (($status == 'success') ? 'alert-success' : 'alert-danger') ?> alert-dismissible fade show border-0 shadow-sm mb-4 admin-login-alert" role="alert">
                                <div class="d-flex align-items-center">
                                    <i class="fas <?= ($status == 'success') ? 'fa-check-circle' : 'fa-exclamation-circle' ?> me-3"></i>
                                    <div class="flex-grow-1">
                                        <?= htmlspecialchars($message) ?>
                                    </div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Login Form -->
                    <div class="px-5 py-4">
                        <form action="/admin/login" method="post" id="loginForm" enctype="multipart/form-data">
                            <!-- Email Input -->
                            <div class="mb-4">
                                <label for="email" class="form-label fw-semibold mb-2 admin-login-label">
                                    <i class="fas fa-user-circle me-2"></i>Admin Email
                                </label>
                                <div class="input-group input-group-lg shadow-sm admin-login-input-group">
                                    <span class="input-group-text bg-white border-end-0 ps-4 admin-login-input-icon">
                                        <i class="fas fa-envelope admin-login-icon"></i>
                                    </span>
                                    <input type="email" name="email" id="email" 
                                           class="form-control border-start-0 ps-3 py-3 admin-login-input" 
                                           placeholder="admin@daphas.com" 
                                           required 
                                           autofocus>
                                </div>
                            </div>

                            <!-- Password Input -->
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label for="password" class="form-label fw-semibold admin-login-label">
                                        <i class="fas fa-key me-2"></i>Password
                                    </label>
                                    <a href="/admin/forgot-password" class="text-decoration-none small fw-semibold admin-login-forgot-link">
                                        <i class="fas fa-unlock-alt me-1"></i>Forgot Password?
                                    </a>
                                </div>
                                <div class="input-group input-group-lg shadow-sm admin-login-input-group">
                                    <span class="input-group-text bg-white border-end-0 ps-4 admin-login-input-icon">
                                        <i class="fas fa-lock admin-login-icon"></i>
                                    </span>
                                    <input type="password" name="password" id="password" 
                                           class="form-control border-start-0 ps-3 py-3 admin-login-input" 
                                           placeholder="••••••••" 
                                           required>
                                    <button class="btn btn-outline-secondary border-start-0 px-4 admin-login-password-toggle" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Remember & Security -->
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <div class="form-check">
                                    <input class="form-check-input admin-login-checkbox" type="checkbox" id="rememberMe" name="rememberMe">
                                    <label class="form-check-label text-muted ms-2 admin-login-checkbox-label" for="rememberMe">
                                        Remember this device
                                    </label>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 py-2 px-3 admin-login-secure-badge">
                                        <i class="fas fa-shield-alt me-1"></i>Secure Connection
                                    </span>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <button type="button" class="btn btn-primary w-100 py-3 mb-4 fw-bold shadow admin-login-submit-btn btn-login" id="btn-login">
                                <i class="fas fa-sign-in-alt me-2"></i>Access Admin Dashboard
                            </button>
                        </form>

                        <!-- Divider -->
                        <div class="d-flex align-items-center my-4 admin-login-divider">
                            <hr class="flex-grow-1 admin-login-divider-line">
                            <span class="px-3 text-muted small fw-semibold admin-login-divider-text">OR CONTINUE WITH</span>
                            <hr class="flex-grow-1 admin-login-divider-line">
                        </div>

                        <!-- Social Login -->
                        <div class="row g-3 mb-4">
                            <div class="col-6">
                                <button type="button" class="btn btn-light w-100 py-3 border-2 fw-semibold shadow-sm admin-login-social-btn">
                                    <i class="fab fa-google text-danger me-2"></i>
                                    Google SSO
                                </button>
                            </div>
                            <div class="col-6">
                                <button type="button" class="btn btn-light w-100 py-3 border-2 fw-semibold shadow-sm admin-login-social-btn">
                                    <i class="fab fa-microsoft text-primary me-2"></i>
                                    Microsoft 365
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Footer Stats -->
                    <div class="bg-light bg-opacity-50 px-5 py-4 mt-4 admin-login-footer-stats">
                        <div class="row text-center g-3">
                            <div class="col-4">
                                <div class="d-flex flex-column align-items-center">
                                    <div class="fs-4 fw-bold admin-login-stat-number admin-login-stat-blue">12.5K</div>
                                    <small class="text-muted admin-login-stat-label">Dictionary Words</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="d-flex flex-column align-items-center">
                                    <div class="fs-4 fw-bold admin-login-stat-number admin-login-stat-dark">48</div>
                                    <small class="text-muted admin-login-stat-label">Categories</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="d-flex flex-column align-items-center">
                                    <div class="fs-4 fw-bold admin-login-stat-number admin-login-stat-blue">99.9%</div>
                                    <small class="text-muted admin-login-stat-label">System Uptime</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bottom Info Bar -->
                <div class="text-center mt-4 px-3 admin-login-info-bar">
                    <p class="text-muted small mb-2 admin-login-info-text">
                        <i class="fas fa-info-circle me-2 admin-login-info-icon"></i>
                        Restricted access. Authorized personnel only.
                    </p>
                    <div class="d-flex justify-content-center gap-4 small admin-login-info-links">
                        <a href="#" class="text-decoration-none admin-login-info-link">
                            <i class="fas fa-shield-alt me-1"></i>Security
                        </a>
                        <a href="#" class="text-decoration-none admin-login-info-link">
                            <i class="fas fa-question-circle me-1"></i>Help Center
                        </a>
                        <a href="#" class="text-decoration-none admin-login-info-link">
                            <i class="fas fa-phone-alt me-1"></i>Support
                        </a>
                    </div>
                    <p class="text-muted small mt-3 admin-login-copyright">
                        <i class="far fa-copyright me-1"></i>Since 2020 Daphas Admin <?= config('APP_VERSION') ?>
                        <span class="mx-2 admin-login-copyright-separator">•</span>
                        <span class="text-success fw-semibold admin-login-status-text">
                            <i class="fas fa-circle fa-xs admin-login-status-dot"></i> All Systems Operational
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- /body -->

<!-- footer -->
{{ @extends("__app.views.footer__") }}
<!-- /footer -->

<!-- auth js -->
<script type="text/javascript" src="<?= asset_path('js/modules/auth.js') ?>"></script>

<!-- closure -->
{{ @extends("__app.views.closure__") }}
<!-- /closure -->