@include('poslanding.partials.nav')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-5 col-md-8">
            
            {{-- Session Status Alert --}}
            @if (session('status'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm mb-4" role="alert">
                {{ session('status') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            {{-- Demo Credentials Card --}}
            @if(config('settings.is_show_credentials', false))
            <script>
                function loginAs(email) {
                    document.getElementById("email").value = email;
                    document.getElementById("password").value = "secret";
                    document.getElementById("loginForm").submit();
                }
            </script>
            <div class="card border-0 shadow-sm mb-4 bg-light">
                <div class="card-body text-center">
                    <p class="text-muted small fw-bold mb-3 uppercase">{{ __('Quick Login') }}</p>
                    <div class="d-grid gap-2">
                        <button type="button" onclick="loginAs('admin@example.com')" class="btn btn-sm btn-outline-danger">Admin</button>
                        <button type="button" onclick="loginAs('owner@example.com')" class="btn btn-sm btn-outline-success">Owner</button>
                        
                        @if (config('app.isft') || config('app.issd'))
                            <button type="button" onclick="loginAs('driver@example.com')" class="btn btn-sm btn-outline-info">Driver</button>
                        @endif

                        @if (config('settings.is_pos_cloud_mode'))
                            <button type="button" onclick="loginAs('staff@example.com')" class="btn btn-sm btn-outline-warning">Staff</button>
                        @endif
                    </div>
                </div>
            </div>
            @endif

            {{-- Main Login Card --}}
            <div class="card border-0 shadow-lg">
                <div class="card-body p-4 p-md-5">
                    
                    {{-- Social Login --}}
                    @if((config('app.isft') || isset($_GET['showCreate'])) && (strlen(config('settings.google_client_id')) > 3 || strlen(config('settings.facebook_client_id')) > 3))
                    <div class="text-center mb-4">
                        <p class="text-muted small">{{ __('Sign in with') }}</p>
                        <div class="d-flex justify-content-center gap-2">
                            @if (strlen(config('settings.google_client_id')) > 3)
                            <a href="{{ route('google.login') }}" class="btn btn-outline-secondary d-flex align-items-center">
                                <img src="{{ asset('argonfront/img/google.svg') }}" width="18" class="me-2"> Google
                            </a>
                            @endif

                            @if (strlen(config('settings.facebook_client_id')) > 3)
                            <a href="{{ route('facebook.login') }}" class="btn btn-outline-secondary d-flex align-items-center">
                                <img src="{{ asset('custom/img/facebook.png') }}" width="18" class="me-2"> Facebook
                            </a>
                            @endif
                        </div>
                        <div class="hr-text text-muted mt-4"><span>OR</span></div>
                    </div>
                    @endif

                    @php
                        use Illuminate\Support\Facades\DB;
                        $settings = DB::table('system_settings')->where('key', 'recaptcha')->first();
                        $settingsData = $settings ? json_decode($settings->value, true) : [];
                        $isRecaptchaActive = ($settingsData['status'] ?? '0') == '1';
                        $siteKey = $settingsData['site_key'] ?? '';
                    @endphp

                    <form id="loginForm" role="form" method="POST" action="{{ route('login') }}">
                        @csrf

                        {{-- Email Field --}}
                        <div class="mb-3">
                            <label class="form-label small fw-bold">{{ __('Email Address') }}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0 text-muted">
                                    <i class="bi bi-envelope"></i>
                                </span>
                                <input id="email" class="form-control border-start-0 ps-0 @error('email') is-invalid @enderror" 
                                       placeholder="name@example.com" type="email" name="email" 
                                       value="{{ old('email', $email) }}" required autofocus>
                            </div>
                            @error('email')
                                <div class="text-danger small mt-1"><strong>{{ $message }}</strong></div>
                            @enderror
                        </div>

                        {{-- Password Field --}}
                        <div class="mb-3">
                            <label class="form-label small fw-bold">{{ __('Password') }}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0 text-muted">
                                    <i class="bi bi-lock"></i>
                                </span>
                                <input id="password" class="form-control border-start-0 border-end-0 ps-0 @error('password') is-invalid @enderror" 
                                       name="password" placeholder="••••••••" type="password" required>
                                <span class="input-group-text bg-white border-start-0 text-muted cursor-pointer" onclick="togglePassword()">
                                    <i class="bi bi-eye" id="togglePasswordIcon"></i>
                                </span>
                            </div>
                            @error('password')
                                <div class="text-danger small mt-1"><strong>{{ $message }}</strong></div>
                            @enderror
                        </div>

                        {{-- Remember Me & Forgot Password --}}
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                <label class="form-check-label small text-muted" for="remember">
                                    {{ __('Remember me') }}
                                </label>
                            </div>
                            @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="text-decoration-none small text-primary fw-bold">
                                {{ __('Forgot password?') }}
                            </a>
                            @endif
                        </div>

                        {{-- Recaptcha --}}
                        @if($isRecaptchaActive)
                        <div class="mb-3">
                            <div class="g-recaptcha d-flex" data-sitekey="{{ $siteKey }}"></div>
                            @error('g-recaptcha-response')
                                <div class="text-danger small text-center mt-1"><strong>{{ $message }}</strong></div>
                            @enderror
                        </div>
                        @endif

                        <div class="d-grid">
                            <button type="submit" class="btn btn-nav-yellow py-2 fw-bold">{{ __('Sign in') }}</button>
                        </div>

                        @if(config('app.isft') || isset($_GET['showCreate']))
                        <div class="text-center mt-4 pt-3 border-top">
                            <span class="text-muted small">Don't have an account?</span><br>
                            <a href="{{ route('register') }}" class="text-success fw-bold text-decoration-none">
                                {{ __('Create new account') }}
                            </a>
                        </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .cursor-pointer { cursor: pointer; }
    .hr-text {
        display: flex;
        align-items: center;
        text-align: center;
    }
    .hr-text::before, .hr-text::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }
    .hr-text span {
        padding: 0 10px;
        font-size: 0.8rem;
        font-weight: bold;
    }
</style>

<script>
    function togglePassword() {
        const passwordInput = document.getElementById("password");
        const toggleIcon = document.getElementById("togglePasswordIcon");

        if (passwordInput.type === "password") {
            passwordInput.type = "text";
            toggleIcon.classList.replace("bi-eye", "bi-eye-slash");
        } else {
            passwordInput.type = "password";
            toggleIcon.classList.replace("bi-eye-slash", "bi-eye");
        }
    }
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
@include('poslanding.partials.footer')