@extends('auth.layouts.app')

@section('title', 'Iniciar sesión')

@section('content')
@if($errors->any())
    <div class="alert alert-danger d-flex align-items-center">
        <span class="alert-icon text-danger me-2"><i class="ti ti-alert-triangle ti-xs"></i></span>
        @foreach ($errors->all() as $error)
            <span>{{ $error }}</span>
        @endforeach

    </div>
@endif

{!! Form::open(['url' => '/login', 'autocomplete' => 'off']) !!}
    <div class="mb-3">
        <label for="email" class="form-label">Usuario</label>
        {!! Form::text('email', old('email'), ['id' => 'email', 'class' => 'form-control', 'autofocus' => 'on','autocomplete' => 'off', 'required' => 'required']) !!}
    </div>
    <div class="mb-3 form-password-toggle">
        <div class="d-flex justify-content-between">
            <label class="form-label" for="password">Contraseña</label>
        </div>
        <div class="input-group input-group-merge">
            {!! Form::password('password', ['id' => 'password', 'class' => 'form-control', 'autocomplete' => 'off', 'required' => 'required']) !!}
            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
        </div>
    </div>
    {!! Form::submit('Ingresar', ['class' => 'btn btn-primary d-grid w-100']) !!}
    {!! Form::close() !!}
@endsection

@section('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var successMessage = "{{ session('success') }}";
        var passwordChanged = "{{ session('password_changed') }}";

        if (successMessage && passwordChanged) {
            Swal.fire({
                title: '¡Éxito!',
                text: successMessage,
                icon: 'success',
                confirmButtonText: 'OK'
            });
        }
    });
</script>