@extends('layouts.auth')

@section('title', 'Login')

@section('content')
<div class="d-flex align-items-center justify-content-center vh-100 bg-light">
    <div class="col-lg-4 col-md-6 col-11">

        <div class="card shadow-lg border-0 rounded-4 p-4">
            
           {{-- Logo --}}
<div class="text-center mb-3">


    <img src="{{ asset('storage/media/settings/kda-logo.jpeg') }}" alt="Logo" height="60">
</div>

            <h3 class="text-center fw-bold">Welcome Back 👋</h3>
            <p class="text-center text-muted mb-4">Login to your account</p>

            {{-- Errors --}}
            @foreach ($errors->all() as $error)
                <div class="alert alert-danger py-2">{{ $error }}</div>
            @endforeach

            {{-- Form --}}
            <form action="{{ route('auth.login') }}" method="post">
                @csrf

                <div class="form-group mb-3">
                    <label class="mb-1">Phone Number</label>
                    <input type="tel" name="phone"
                        class="form-control form-control-lg @error('phone') border-danger @enderror"
                        placeholder="Enter phone number"
                        value="{{ old('phone') }}">
                </div>

                <div class="form-group mb-3">
                    <label class="mb-1">Password</label>
                    <input type="password" name="password"
                        class="form-control form-control-lg @error('password') border-danger @enderror"
                        placeholder="Enter password">
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember_me"
                            {{ old('remember_me') ? 'checked' : '' }} id="remember_me">
                        <label class="form-check-label" for="remember_me">
                            Remember me
                        </label>
                    </div>

                    <!-- <a href="{{ route('auth.forgot-password.show') }}" class="text-primary small">
                        Forgot?
                    </a> -->
                </div>

                <button class="btn btn-primary w-100 btn-lg rounded-3 shadow-sm">
                    Login
                </button>
            </form>

            <!-- {{-- Demo Button --}}
            <div class="text-center mt-3">
                <button id="demo-credentials-btn" class="btn btn-outline-primary btn-sm">
                    Demo Login
                </button>
            </div> -->

        </div>
    </div>
</div>

{{-- Demo Popup --}}
<div id="demo-credentials-popup"
    class="d-none position-fixed top-50 start-50 translate-middle bg-white p-4 shadow rounded-4"
    style="width: 320px; z-index:999;">

    <button id="close-popup" class="btn-close position-absolute top-0 end-0 m-2"></button>

    <h5 class="text-center mb-3">Demo Accounts</h5>

    <div class="mb-2 d-flex justify-content-between">
        <span>Admin</span>
        <button class="btn btn-sm btn-primary"
            onclick="copyToInput('{{ env('DEMO_ADMIN') }}', '{{ env('DEMO_PASSWORD') }}')">Use</button>
    </div>

    <div class="mb-2 d-flex justify-content-between">
        <span>Student</span>
        <button class="btn btn-sm btn-primary"
            onclick="copyToInput('{{ env('DEMO_STUDENT') }}', '{{ env('DEMO_PASSWORD') }}')">Use</button>
    </div>

    <div class="mb-2 d-flex justify-content-between">
        <span>Teacher</span>
        <button class="btn btn-sm btn-primary"
            onclick="copyToInput('{{ env('DEMO_TEACHER') }}', '{{ env('DEMO_PASSWORD') }}')">Use</button>
    </div>
</div>

<script>
    document.getElementById('demo-credentials-btn').onclick = () => {
        document.getElementById('demo-credentials-popup').classList.remove('d-none');
    };

    document.getElementById('close-popup').onclick = () => {
        document.getElementById('demo-credentials-popup').classList.add('d-none');
    };

    function copyToInput(phone, password) {
        document.querySelector('input[name="phone"]').value = phone;
        document.querySelector('input[name="password"]').value = password;
        document.getElementById('demo-credentials-popup').classList.add('d-none');
    }
</script>
@endsection