@extends('layouts.public')
@section('title', 'Voter Login — ' . $election->title)

@section('content')
<div class="page-hero">
    <div class="container text-center">
        <i class="bi bi-check2-square display-4 mb-3"></i>
        <h1 class="fw-bold mb-1">Voting Portal</h1>
        <p class="opacity-75">{{ $election->title }}</p>
        @if($election->voting_end)
        <small class="opacity-60"><i class="bi bi-clock me-1"></i>Voting closes: {{ $election->voting_end->format('d M Y H:i') }}</small>
        @endif
    </div>
</div>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card p-4">
                <h4 class="fw-bold mb-1">Voter Verification</h4>
                <p class="text-muted small mb-4">Enter your Unique ID and registered telephone number to access the ballot.</p>

                @if($errors->any())
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    {{ $errors->first('error') ?? $errors->first() }}
                </div>
                @endif

                <form method="POST" action="{{ route('voting.verify') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Unique ID <span class="text-danger">*</span></label>
                        <input type="text" name="unique_id" class="form-control form-control-lg @error('unique_id') is-invalid @enderror"
                               placeholder="e.g. STU-2024-001" value="{{ old('unique_id') }}" required autocomplete="off">
                        @error('unique_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Telephone Number <span class="text-danger">*</span></label>
                        <input type="tel" name="telephone" class="form-control form-control-lg @error('telephone') is-invalid @enderror"
                               placeholder="e.g. 0701234567" value="{{ old('telephone') }}" required autocomplete="off">
                        @error('telephone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg w-100">
                        <i class="bi bi-arrow-right-circle me-1"></i>Verify & Proceed to Ballot
                    </button>
                </form>

                <hr class="my-4">
                <p class="text-muted small text-center mb-0">
                    <i class="bi bi-shield-lock me-1"></i>
                    Your identity is verified securely. Votes are anonymous.
                </p>
            </div>

            <div class="card p-3 mt-3 bg-light border-0">
                <small class="text-muted"><i class="bi bi-info-circle me-1"></i>Having trouble? Contact your election administrator for assistance.</small>
            </div>
        </div>
    </div>
</div>
@endsection