<?php

use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Rule;

new #[Layout('components.layouts.guest')] class extends Component {
    #[Rule('required|string')]
    public string $username = '';

    #[Rule('required|string')]
    public string $password = '';

    public bool $rememberMe = false;

    public function login(): void
    {
        $this->validate();

        if (Auth::attempt(['uid' => $this->username, 'password' => $this->password], $this->rememberMe)) {
            session()->regenerate();
            $this->redirectIntended(route('dashboard'), navigate: true);
            return;
        }

        $this->addError('username', 'These credentials do not match our records.');
    }
}
?>

<div class="min-vh-100 d-flex align-items-center justify-content-center">
    <div class="card shadow-sm" style="width: 100%; max-width: 420px;">
        <div class="card-body p-4">
            <div class="text-center mb-4">
                <h4 class="fw-bold">Travel Request System</h4>
                <p class="text-muted small">Sign in with your network credentials</p>
            </div>

            <form wire:submit="login">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        @foreach ($errors->all() as $error)
                            <div>{{ $error }}</div>
                        @endforeach
                    </div>
                @endif

                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input
                        type="text"
                        id="username"
                        wire:model="username"
                        class="form-control @error('username') is-invalid @enderror"
                        autocomplete="username"
                        autofocus
                    >
                    @error('username')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input
                        type="password"
                        id="password"
                        wire:model="password"
                        class="form-control @error('password') is-invalid @enderror"
                        autocomplete="current-password"
                    >
                    @error('password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" id="rememberMe" wire:model="rememberMe" class="form-check-input">
                    <label for="rememberMe" class="form-check-label">Remember me</label>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-primary" wire:loading.attr="disabled">
                        <span wire:loading.remove>Sign In</span>
                        <span wire:loading>
                            <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                            Signing in...
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
