@extends('layouts.auth')
@section('title', 'Log In — FeespPay.ng')

@section('auth-top')
<div class="auth-right-top">
    <span>Do not have an account?</span>
    <a href="{{ route('register') }}" class="btn btn-accent btn-sm">Register</a>
    <a href="mailto:hello@feespay.ng" class="btn btn-ghost btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/>
            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
        Support
    </a>
</div>
@endsection

@section('content')
<h1>Log In</h1>
<p class="auth-sub">Please log in using your phone number and 6-digit PIN</p>

@if($errors->any())
<div class="alert alert-error">{{ $errors->first() }}</div>
@endif
@if(session('flash_success'))
<div class="alert alert-success">{{ session('flash_success') }}</div>
@endif
@if(session('flash_error'))
<div class="alert alert-error">{{ session('flash_error') }}</div>
@endif

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

    <div class="form-group">
        <input type="tel" name="phone"
            class="form-control @error('phone') is-invalid @enderror"
            placeholder="Phone number e.g. 09130128972"
            value="{{ old('phone', cookie('remember_phone')) }}"
            required inputmode="numeric"
            pattern="^(0[7-9][0-1][0-9]{8}|[+]234[7-9][0-1][0-9]{8})$">
        @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <div class="input-icon-wrap">
            <input type="password" name="pin" id="login_pin"
                class="form-control @error('pin') is-invalid @enderror"
                placeholder="6-digit PIN" maxlength="6" minlength="6"
                inputmode="numeric" pattern="\d{6}" required>
            <span class="input-icon pin-toggle" data-target="login_pin">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"
                    stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                    <circle cx="12" cy="12" r="3"/>
                </svg>
            </span>
        </div>
        @error('pin')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="d-flex justify-between align-center" style="margin-bottom:24px">
        <div class="form-check mb-0">
            <input type="checkbox" id="remember_me" name="remember" value="1"
                {{ old('remember') ? 'checked' : '' }}>
            <label for="remember_me">Remember me</label>
        </div>
        <a href="{{ route('forgot.pin') }}" class="text-brand font-bold"
           style="font-size:0.85rem">Forgot PIN?</a>
    </div>

    <button type="submit" class="btn btn-accent btn-full">Login</button>
</form>
@endsection