@extends('layouts.auth')

@section('content')
    <div class="row w-100" style="max-width: 980px">
        <!-- LEFT TEXT -->
        <div class="col-md-6 d-none d-md-flex flex-column justify-content-center">
            <img src="{{ asset('assets/img/logo-nafapos.png') }}"
                 alt="NafaPOS"
                 style="width:220px" class="mb-3">

            <h4 class="fw-normal" style="font-size: 1.1rem">
                NafaPOS vous aide à gérer vos ventes, stocks et boutiques en toute simplicité.
            </h4>
        </div>

        <!-- LOGIN CARD -->
        <div class="col-md-6">
            <div class="card shadow-sm border-0">
                <div class="card-body p-4" style="margin: 3rem 0">
                    @if (Session::get('account_desactivated'))
                        <div class="alert alert-danger text-center">
                            {{ Session::get('account_desactivated') }}
                        </div>
                    @endif

                    <form action="{{ route('login') }}" method="POST">
                        @csrf
                        <!-- USERNAME -->
                        <div class="mb-3">
                            <input type="text"
                                   name="username"
                                   class="form-control form-control-lg @error('username') is-invalid @enderror"
                                   placeholder="Nom d'utilisateur"
                                   value="{{ old('username') }}">
                            @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <!-- PASSWORD -->
                        <div class="mb-3 position-relative">
                            <input type="password"
                                   name="password"
                                   id="password"
                                   class="form-control form-control-lg @error('password') is-invalid @enderror"
                                   placeholder="Mot de passe">
                            <span class="position-absolute end-0 top-50 translate-middle-y me-3 text-muted cursor-pointer"
                                  onclick="togglePassword()">
                                <i id="eyeIcon" class="bx bx-hide"></i>
                            </span>
                            @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <!-- LOGIN BUTTON -->
                        <button type="submit" class="btn btn-primary btn-lg w-100 fw-semibold">
                            Se connecter
                        </button>
                    </form>
                </div>
            </div>

            <p class="text-center mt-3 text-muted small">
                © {{ date('Y') }} NafaPOS – Tous droits réservés
            </p>
        </div>
    </div>
@endsection