@extends('layouts.app')

@section('title', 'Log Masuk')

@push('css')
    <style>
        .captcha-box {
            background: #f8faf8;
            border: 1px solid #e1e8df;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .refresh-btn {
            width: 3rem;
            height: 3rem;
            border: 1px solid #e1e8df;
            border-radius: 10px;
            background: #fff;
            font-size: 24px;
            color: #89958c;
        }

        .timer {
            color: #777;
            font-size: 14px;
        }

        .timer-icon {
            margin-right: 5px;
        }

        .progress {
            height: 4px;
            background-color: #dfe5df;
        }

        .progress-bar {
            background-color: #e9a21b;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-4">

                <div class="card">
                    <div class="card-body">
                        <img src="{{ asset('assets/img/geoforestLogo.png') }}" alt="Logo" class="img-fluid mx-auto d-block" style="height: 100px;">
                        <div class="pt-4 pb-2">
                            <h5 class="card-title text-center pb-0 fs-4"><strong>LOG MASUK</strong></h5>
                            <p class="text-center small">Sila Masukkan <span class="fw-bold">ID Pengguna</span> dan <span class="fw-bold">Kata Laluan</span></p>
                        </div>
                        @if (Session::has('message'))
                            <div class="alert alert-success" role="alert">
                                {{ Session::get('message') }}
                            </div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger shadow-sm" role="alert">
                                <svg class="me-2 svg-danger" xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
                                    <path d="M0 0h24v24H0z" fill="none" />
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
                                </svg>

                                @if ($errors->has('not_active'))
                                    Akaun pengguna tidak aktif. Sila hubungi pentadbir sistem.
                                @else
                                    @foreach ($errors->all() as $error)
                                        {{ $error }}
                                    @endforeach
                                @endif
                            </div>
                        @endif

                        <form class="row g-3 needs-validation" method="POST" action="{{ route('login') }}" novalidate>
                            @csrf
                            <div class="col-12">
                                <div class="input-group has-validation">
                                    <input type="text" name="ic" class="form-control @error('ic') is-invalid @enderror" id="yourUsername" placeholder="ID Pengguna" value="{{ old('ic') }}" data-maska="######-##-####" required>
                                </div>
                            </div>
                            <div class="col-12 position-relative">
                                <input type="password" class="form-control @if($errors->has('ic') || $errors->has('password')) is-invalid @endif" id="passwordInput" name="password" placeholder="Kata Laluan" style="padding-right: 45px;">
                                <span id="togglePassword" class="position-absolute top-50 translate-middle-y" style="right: 15px; cursor: pointer; z-index: 10;">
                                    <i class="fas fa-eye-slash"></i>
                                </span>
                            </div>

                            <div>
                                <label class="fw-semibold mb-2 d-block">
                                    Pengesahan Captcha
                                    <span class="text-danger">*</span>
                                </label>

                                <div class="captcha-box">
                                    <div style="max-width: 12rem; margin-inline: auto;">
                                        <img src="{{ captcha_src() }}" alt="captcha" class="img-fluid" id="captcha-image">
                                    </div>

                                    <button type="button" class="refresh-btn" onclick="reloadCaptcha()">↻</button>
                                </div>

                                <div class="d-flex align-items-center mt-3 timer">
                                    <span class="timer-icon">◷</span>
                                    <span><span id="current-timer">60</span>s</span>

                                    <div class="progress flex-grow-1 ms-2">
                                        <div class="progress-bar" style="width: 100%;"></div>
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <input type="text" name="captcha" class="form-control @if($errors->has('captcha')) is-invalid @endif" placeholder="Masukkan kod captcha di atas">
                                </div>
                            </div>


                            <div class="col-12 text-center">
                                <button class="btn btn-primary w-100" type="submit">Log Masuk</button>
                            </div>
                            <div class="col-12 text-center mt-5">
                                <div>
                                    <a href="{{ route('password.request') }}">
                                        Lupa Kata Laluan
                                    </a>

                                </div>
                                <div>
                                    Tiada akaun?
                                    <a href="{{ route('register') }}">
                                        Daftar Pengguna
                                    </a>
                                </div>
                            </div>

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

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $expire = @json(config('captcha.default.expire'));

        document.getElementById('togglePassword').addEventListener('click', function() {
            var passwordInput = document.getElementById('passwordInput');
            var eyeIcon = this.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.classList.remove('fa-eye-slash');
                eyeIcon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                eyeIcon.classList.remove('fa-eye');
                eyeIcon.classList.add('fa-eye-slash');
            }
        });

        setInterval(async () => {
            const response = await fetch(`{{ route('refresh-csrf') }}`);
            const data = await response.json();

            document.querySelectorAll('input[name="_token"]').forEach(function(input) {
                input.value = data.token;
            });
        }, 600000); // 10 minutes


        async function reloadCaptcha() {
            const response = await fetch(`{{ route('captcha.reload') }}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            const data = await response.json();

            
            document.querySelector('#captcha-image').src = data.captcha;
            document.querySelector('#current-timer').textContent = $expire;
            document.querySelector('.progress-bar').style.width = '100%';
        }

        // update second and progress bar every second
        setInterval(() => {
            const currentTimer = document.querySelector('#current-timer');
            const progressBar = document.querySelector('.progress-bar');    
            let timeLeft = parseInt(currentTimer.textContent);

            if (timeLeft > 0) {
                timeLeft--;
                currentTimer.textContent = timeLeft;
                progressBar.style.width = `${timeLeft / $expire * 100}%`;
            } else {
                reloadCaptcha();
            }

        }, 1000); // 1 second
    </script>
@endpush