@extends('layouts.auth')

@section('content')
<div class="authentication-inner">
    <div class="card">
        {{-- ALERT --}}
        @if (Session::has('account_desactivated'))
            <div class="card-header">
                <div class="alert alert-danger d-flex align-items-center" role="alert">
                    <i class="bx bx-error-circle me-2"></i>
                    <div>{{ Session::get('account_desactivated') }}</div>
                </div>
            </div>
        @endif

        <div class="card-body">

            {{-- LOGO --}}
            <div class="text-center mb-4">
                <img src="{{ asset('assets/img/logo.jpeg') }}"
                     alt="Bapetrocom"
                     style="width: 100px">

                <p class="mb-0 text-muted">
                    Système de gestion de carburant, de stations-service et de stocks
                </p>
            </div>

            {{-- FORM --}}
            <form method="POST" action="{{ route('login') }}">
                @csrf

                {{-- USERNAME --}}
                <div class="mb-3">
                    <label class="form-label">
                        Username <span class="text-danger">*</span>
                    </label>

                    <input type="text"
                           name="username"
                           value="{{ old('username') }}"
                           class="form-control @error('username') is-invalid @enderror"
                           required
                           autofocus>

                    @error('username')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                {{-- PASSWORD --}}
                <div class="mb-3">
                    <label class="form-label">
                        Mot de passe <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">
                        <input type="password"
                               name="password"
                               id="password"
                               class="form-control @error('password') is-invalid @enderror"
                               placeholder="••••••••"
                               required>

                        <span class="input-group-text cursor-pointer" id="togglePassword">
                            <i class="bx bx-hide"></i>
                        </span>
                    </div>

                    @error('password')
                        <div class="text-danger small mt-1">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                {{-- BUTTON --}}
                <button type="submit" class="btn btn-primary w-100">
                    Se connecter
                </button>
            </form>

            {{-- FOOTER --}}
            <p class="text-center mt-4 text-muted small">
                © {{ date('Y') }} Bapetrocom - Tous droits réservés
            </p>
        </div>
    </div>
</div>

{{-- SCRIPT PASSWORD TOGGLE --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('password');
        const icon = togglePassword.querySelector('i');

        togglePassword.addEventListener('click', function () {

            const isPassword = password.type === 'password';
            password.type = isPassword ? 'text' : 'password';

            icon.classList.toggle('bx-hide', !isPassword);
            icon.classList.toggle('bx-show', isPassword);
        });
    });
</script>

@endsection